@gluonjs/core / packages/molecules/src / DataTableRow

Interface: DataTableRow<Row>

Type Parameters

Row

Row

Properties

disabled?

readonly optional disabled?: boolean

---

id

readonly id: string

---

value

readonly value: Row

Example

Describe one stable DataTable row and its caller-owned value:

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');