react-use-table-editor
Advanced tools
React hook that provides dirty-tracking on table rows and cells
The react-use-table-editor) package exports a useTableEditor hook that maintains table-row state and provides cell-based update functions as well as dirty tracking for both cells and rows. The package also exports an EditableTable component that can be used with the hook result to easily build a table with custom cell-edit components that receive the cell state and dirty information via render-prop arguments.
The edit state is injected into each data row as a unique non-enumerable property, which allows other table packages to be used for building and rendering the table. The hook returns a number of strongly-typed edit functions for updating cell values, and adding, removing, or reverting rows.
A typical use case for this package is a page that offers batched editing for a list of server-based records. The table gets initialized with results from an api request, after which cells can be edited locally, and rows can be added or removed. Local changes are reflected in computed information like column sums, and can be reverted if necessary. A save button will send the modified rows to the api server and on success commit the changes to the local table.
To experiment with the package, you can open the demo on CodeSandbox.
The package can be installed with
> npm install react-use-table-editor
Note that the it is still under heavy development, so breaking changes are to be expected, and documentation will be sparse until the model stabilizes.
The demo table app in this repository (also available on CodeSandbox) can be run locally with
> git clone git@github.com:Oblosys/react-use-table-editor
> cd react-use-table-editor
> npm install
> npm start
FAQs
React hook that provides dirty-tracking on table rows and cells
We found that react-use-table-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.