UI components for react-table based on ui-core
npm i @habx/ui-table
- Fixed headers
- React table built in plugins
- Infinite scroll
- Import/export
Test all our components in our Storybook
const tableInstance = useTable({
data: FAKE_DATA,
columns: BASIC_COLUMNS,
})
return (
<Container>
<Table instance={tableInstance} />
</Container>
)
Import and export your data in .xlsx
or .csv
thanks to exceljs
export const IMEX_COLUMNS = [
{
Header: 'Email',
accessor: 'email',
meta: {
imex: {
type: 'string' as const,
},
},
},
{
Header: 'Age',
accessor: 'age',
meta: {
imex: {
type: 'number' as const,
},
},
},
]
const tableInstance = useTable({
data,
columns,
})
const [downloadTableData] = useExportTable({
data: FAKE_DATA,
columns: IMEX_COLUMNS,
})
const tableInstance = useTable({
data,
columns,
})
const upsertRow = () => new Promise((resolve) => setTimeout(resolve, 1000))
const importTable = useImportTable({
columns,
upsertRow: upsertRow,
getOriginalData: () => data,
})
return (
<Container>
<ActionBar>
<Button outline onClick={importTable.browseLocalFiles}>
Import
</Button>
</ActionBar>
<input {...importTable.inputProps} />
</Container>
)