Table
A table displaying data.
Importing
1
import { Table } from '@infinityfx/fluid';Usage
Column formatters
Empty Table
API reference
Table Props
data
(T extends { [key: string]: string | number | Date; })[]
Required
The array of row data objects to display.
columns
(keyof T)[]
Required
The keys of row data objects that represent columns.
maxColumnWidth?
string
'auto'
The maximum width of a table column.
selectable?
boolean
false
Allows rows to be selected using checkboxes.
sortable?
boolean | (keyof T)[]
false
Enables sorting columns when clicked. Can specify an array of sortable column keys.
selected?
number[]
Controlled array of selected row indices.
onSelect?
(selected: number[]) => void
Callback function triggered when row selection changes.
columnFormatters?
{ [column in keyof T]: (value: T[column]) => React.ReactNode }
Custom formatting functions for specific columns.
rowActions?
(row: T, index: number) => React.ReactNode
A function that returns action menu items for a row.
emptyMessage?
string
"Nothing to display"
Text shown when the table data is empty.