react-notable v0.5.0

React Notable

⚠️🚧🚧 Currently in development stage 🚧🚧⚠️️️️

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)
• Easy-to-customize styling
• AutoSizer
• Sorting
• Pagination

Pending development tasks

• Multi column sorting
• Export to file
• Freezing rows/columns
• Resizing columns
• Footer
• Infinite scrolling
• scrollToIndex, scrollTop, scrollToAlignment props
• Grouping / Pivoting
• Movable columns

Install

yarn add react-notable

Usage

Columns can be passed as array or components. Both cases are listed below.

Simple use case

import { Table, Column } from 'react-notable'

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 'react-notable'


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

react-notable is open source software licensed as MIT © Hugo Corta.