Backpack datatable component.
npm install bpk-component-datatable --save-dev
import React from 'react';
import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
const rows = [
{ name: 'Jose', description: 'Software Engineer' },
{ name: 'Rolf', description: 'Manager' }
]
const onRowClick = row => alert(JSON.stringify(row));
export default () => (
<BpkDataTable rows={rows} height={200} onRowClick={onRowClick}>
<BpkDataTableColumn
label={'Name'}
dataKey={'name'}
width={100}
/>
<BpkDataTableColumn
label={'Description'}
dataKey={'description'}
width={100}
flexGrow={1}
/>
</BpkDataTable>
);
Supports all properties defined in Table
(from react-virtualized
),
in addition to the following:
Property | PropType | Required | Default Value |
---|---|---|---|
rows | arrayOf(Object) | true | - |
children | arrayOf(BpkDataTableColumn) | true | - |
height | number | true | - |
width | number | false | full width of parent |
headerHeight | number | false | 60 |
rowHeight | number | false | 60 |
defaultColumnSortIndex | number | false | 0 |
Supports all properties defined in Column
(from react-virtualized
)