API — <DataTable />
The component accepts the following props:
Name title | Type string|ReactNode | Description Title used to caption table. |
Name columns | Type array | Description Columns used to describe table. Must be either an array of simple strings or objects describing a column. |
Name data | Type array | Description Data used to describe table. Must be either an array containing objects of key/value pairs with values that are strings or numbers, or arrays of strings or numbers.
The customBodyRender and customBodyRenderLite options can be used to control the data display. |
Name options | Type array | Description Options used to describe table. |
Name components | Type object | Description Custom components used to render the table. |
Customize Columns
On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:
const columns = [
{
name: 'Name',
options: {
filter: true,
sort: false
}
}
// ....
]
customHeadRender is called with these arguments:
function(columnMeta: {
customHeadRender: func,
display: true | false | 'excluded',
filter: boolean,
sort: boolean,
download: boolean,
empty: boolean,
index: number,
label: string,
name: string,
print: boolean,
searchable: boolean,
viewColumns: boolean
}, handleToggleColumn: function(columnIndex))
customBodyRender is called with these arguments:
function(value: any, tableMeta: {
rowIndex: number,
columnIndex: number,
columnData: array, // Columns Options object
rowData: array, // Full row data
tableData: array, // Full table data - Please use currentTableData instead
currentTableData: array, // The current table data
tableState: {
announceText: null|string,
page: number,
rowsPerPage: number,
filterList: array,
selectedRows: {
data: array,
lookup: object,
},
showResponsive: boolean,
searchText: null|string,
},
}, updateValue: function)