@gluonjs/core / packages/molecules/src / DataTableColumn

Interface: DataTableColumn<Row>

Type Parameters

Row

Row

Properties

ariaLabel?

readonly optional ariaLabel?: string

---

cell

readonly cell: (row, index) => TemplateValue

Parameters

row

Row

index

number

Returns

TemplateValue

---

header

readonly header: TemplateValue

---

id

readonly id: string

---

sortable?

readonly optional sortable?: boolean

---

sortDirection?

readonly optional sortDirection?: DataTableSortDirection

Example

Describe one labelled DataTable column with a caller-owned cell renderer and optional sorting:

import { DataTable, dataTableStyles } from '@gluonjs/molecules';
import type { DataTableAccessibleName, DataTableAttributes, DataTableColumn, DataTableProps, DataTableRow, DataTableSortDirection, DataTableState, DataTableTableAttributes } from '@gluonjs/molecules';
type InventoryRow = { product: string; status: string; units: number };
const accessibleName: DataTableAccessibleName = { label: 'Inventory' };
const attributes: DataTableAttributes = { class: 'inventory-table' };
const tableAttributes: DataTableTableAttributes = { class: 'inventory-table-native' };
const direction: DataTableSortDirection = 'ascending';
const state: DataTableState = 'ready';
const columns: readonly DataTableColumn<InventoryRow>[] = [
  { id: 'product', header: 'Product', sortable: true, sortDirection: direction, cell: (row) => row.product },
  { id: 'status', header: 'Status', cell: (row) => row.status },
  { id: 'units', header: 'Units', cell: (row) => row.units },
];
const rows: readonly DataTableRow<InventoryRow>[] = [{ id: 'orbit-lamp', value: { product: 'Orbit lamp', status: 'Ready', units: 24 } }];
const props: DataTableProps<InventoryRow> = { ...accessibleName, id: 'inventory', columns, rows, state, selectable: true, selectedRowIds: ['orbit-lamp'], attributes, tableAttributes, onSort: (columnId, nextDirection) => console.log(columnId, nextDirection) };
console.log(DataTable(props), dataTableStyles, 'DataTable dataTableStyles DataTableAccessibleName DataTableAttributes DataTableColumn DataTableProps DataTableRow DataTableSortDirection DataTableState DataTableTableAttributes');