1.0.0 • Published 4 years ago
@hcorta/jsx-table v1.0.0
jsx-table
Features
- 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
Pending development tasks
- Multi column sorting
- Export to file
- Resizing columns
- Footer
- scrollToIndex, scrollTop, scrollToAlignment props
- Grouping / Pivoting
- Movable columns
Install
yarn add jsx-table
Usage
Columns can be passed as array or components. Both cases are listed below.
Simple use case
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}/>
)
}
Advanced use case
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>
}
Contributing
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
Code of Conduct
Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
License
jsx-table
is open source software licensed as MIT © Hugo Corta.
1.0.0
4 years ago