A simple but powerful lightweight (6.4kB) table for React with highly-customizable options
- Lightweight (6.4kb gziped - no dependencies)
- Auto out of the box, fully controllable API
- Headless (100% customizable, Bring-your-own-UI)
- Virtualization (no performance loss for long data lists)
- Infinite scrolling (continuously loaded content)
- Sticky rows/columns
- AutoSizer
- Sorting
- Pagination
- Multi column sorting
- Export to file
- Resizing columns
- Footer
- scrollToIndex, scrollTop, scrollToAlignment props
- Grouping / Pivoting
- Movable columns
yarn add jsx-table
Columns can be passed as array or components. Both cases are listed below.
import { Table, Column } from 'jsx-table'
function Example () {
const data = [
{ name: 'Hugo', age: 30 },
{ name: 'John', age: 32 }
]
const columns = [
{ header: 'Name', dataKey: 'name' },
{ header: 'Age', dataKey: 'age' }
]
return (
<Table data={data} columns={columns}/>
)
}
import { Table, Column } from 'jsx-table'
function CustomCell({ cellData, ...restOfCellProps }) {
return (
<span>{cellData}</span>
)
}
function CustomHeader({ cellData, ...restOfHeaderProps }) {
return (
<span>{cellData}</span>
)
}
function customColumnSort({ a, b, sortBy, sortDirection }) {
if (sortDirection === 'ASC') {
if (a[sortBy] < b[sortBy]) return -1
if (a[sortBy] > b[sortBy]) return 1
} else {
if (a[sortBy] < b[sortBy]) return 1
if (a[sortBy] > b[sortBy]) return -1
}
}
function Example () {
const data = [
{ name: 'Hugo', genre: 'Male', age: 30, country: 'Spain' },
{ name: 'Helen', genre: 'Female', age: 32, country: 'France' },
...
]
return (
<Table
id={'custom-table-id'}
className={'custom-table-class'}
headerClassName={'custom-header-class'}
rowClassName={'custom-row-class'}
loading={loading}
height={700}
width={'100%'}
data={data}
rowHeight={20}
headerHeight={25}
overscanRowCount={50}
virtualized={false}
onRowClick={row => console.log('Row', row)}
onCellClick={cell => console.log('Cell', cell)}
onHeaderClick={header => console.log('Header', header)}
onColumnSort={props => console.log(props)}
noDataMessage={'There is no data to display'}
noDataComponent={({ noDataMessage }) => <span>{noDataMessage}</span>}
>
<Column
header={'Name'}
width={'20%'}
dataKey={'name'}
sortable={true}
/>
<Column
header={'Genre'}
width={200}
dataKey={'genre'}
sortable={true}
columnSortMethod={customColumnSort}
/>
<Column
header={CustomColumnHeader}
dataKey={'age'}
sortable={true}
/>
<Column
header={'Country'}
dataKey={'country'}
sortable={true}
cell={CustomColumnCell}
/>
</Table>
}
No one’s perfect. If you’ve found any errors, want to suggest enhancements, or expand on a topic, please feel free to open an Issue or collaborate by PR.
Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub
Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
jsx-table
is open source software licensed as MIT © Hugo Corta.