dateTime

date / time / datetime.

Example source

import React from 'react'
import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'
const rows = [{ id:'1', item:'Created', v:'2026-08-24' }, { id:'2', item:'Updated', v:'2026-01-05' }]
const columns: BstTableColumn<any>[] = [
  { id: 'item', accessorKey: 'item', header: 'Item' },
  { id:'v', accessorKey:'v', header:'Date', meta:{ type:'dateTime', cellMeta:{ variant:'date' } } },
]
export default function App() {
  return <BstTableMui data={rows} columns={columns} getRowId={(r) => r.id} pagination={false} />
}

Loading live example…

Guide

When to use it

Dates, times, or timestamps that should render and edit with a real picker instead of free text.

How it works

Reads an ISO string or a Date and formats it locale-aware. cellMeta.variant selects date / time / datetime; editing opens the native picker. The original value is preserved on save.

Options

• cellMeta.variant — 'date' | 'time' | 'datetime'.
• meta.format (Intl.DateTimeFormatOptions) and meta.locale for custom formatting.
• cellMeta.required — reject an empty value.

At a glance

Renders	date / time / datetime
Value shape	string | Date | null
Editable	✅ native picker
Key cellMeta	variant, required

Use it

const columns: BstTableColumn<Row>[] = [
  { id: 'x', accessorKey: 'x', header: 'X', meta: { type: 'dateTime', /* cellMeta below */ } },
]

cellMeta options

dateTime — also honours meta.format (Intl.DateTimeFormatOptions) and meta.locale.

cellMeta	Type	Effect
variant	'date' | 'time' | 'dateTime'	Picker + display mode. Default 'date'.