@gluonjs/core / packages/molecules/src / DataTable

Variable: DataTable

const DataTable: <Row>(props) => TemplateResult & object

Type Declaration

displayName

displayName: string = dataTableComponent.displayName

layer

layer: ComponentLayer = dataTableComponent.layer

styles

styles: readonly ComponentStyleDependency[] = dataTableComponent.styles

Example

Render a native sortable and selectable data table while keeping rows and mutations caller-owned:

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