table

A React UI Components for Table

Jun 04, 2021
A React UI Components for Table

React Table UI

UI components for react-table based on ui-core.

View Demo View Github

ui-table

68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f686162782f696d6167652f75706c6f61642f76313631363530363938372f746563682f75692d7461626c652f7461626c652d6461726b2e706e67

Installation

npm i @habx/ui-table

Features

  • Fixed headers
  • React table built in plugins
  • Infinite scroll
  • Import/export

Test all our components in our Storybook

Basic usage

const tableInstance = useTable({ data: FAKE_DATA, columns: BASIC_COLUMNS, }) return ( <Container> <Table instance={tableInstance} /> </Container> )

Import / Export

Import and export your data in .xlsx or .csv thanks to exceljs

ui-table

Columns Example

export const IMEX_COLUMNS = [ { Header: 'Email', accessor: 'email', meta: { imex: { type: 'string' as const, }, }, }, { Header: 'Age', accessor: 'age', meta: { imex: { type: 'number' as const, }, }, }, ]

Export

const tableInstance = useTable({ data, columns, }) const [downloadTableData] = useExportTable({ data: FAKE_DATA, columns: IMEX_COLUMNS, })

Import

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> )
Recommended