Skip to content

Latest commit

 

History

History
84 lines (53 loc) · 3.21 KB

examples.md

File metadata and controls

84 lines (53 loc) · 3.21 KB
Raw

FAQ

How to force render a table?

  • ReactTabulator automatically rerenders when data, columns or options changed.
  • In case you want to force render it, you can set the component "key" to something else like:
const [tableKey, setTableKey] = React.useState(`${Math.random()}`)

on change: setTableKey(`${Math.random()}`)

<ReactTabulator key={tableKey} ref={tableRef} columns={columns} data={data}

How to set Tabulator's options?

  • ReactTabulator "options" prop will be passed directly to Tabulator's options when initializing the table.

How to call Tabulator's functions?

  • Use "ref.table" to access to all tabulator functions. Example.

Live Examples

React-tabulator version may not be the latest in these examples. Feel free to open a PR to add your examples.

Themes:

  • Try out different Themes: Link

Columns:

  • Dynamically set columns - Link

Rows:

  • Row selection - Link

Data:

  • Button to Add, Remove rows, editable cell, get data; useState - Link
  • Button to Add, Async Add, Remove rows with Redux Store - Link
  • Dropdown to filter table data - Link
  • Performance - render a lot of data with faker - Link

Edit:

  • Edit & get edited data - Link

Export:

  • Export to CSV file - please use this workaround: #76

Support React v15.x (legacy, stopped support from 2021-01)

  • With React 15.x - Link

Show cases

If you are using ReactTabulator in your project, please feel free to open a PR or contact me to add it here:

https://github.com/moshtaghi/nydax

https://github.com/preftech/dash-tabulator

https://github.com/chatatechnologies/react-autoql

https://github.com/dotadraft/dotadraft_ui

Stock Portfolio

Other Projects