React Remote Sortable Columns
Sort table data using remote api by click and toggle the table columns.
Install via NPM
npm install --save react-remote-sortable-columns
Install via Yarn
yarn add react-remote-sortable-columns
Components Usage
The package will provide 2 components TR
and TH
:
TR
Table Row Component Props
Prop | type | default | description |
---|---|---|---|
sortKey |
string | Null |
The current sort column name/key |
sortDir |
string | Null |
The current sort direction |
onChange |
function | Null |
Function will called on column clicked and will pass the column identifier and direction |
ascClass |
string | fa fa-sort-asc |
Css class on ASC sorting |
descClass |
string | fa fa-sort-desc |
Css class on Desc sorting |
children |
components | Header row columns using <TH ...></TH> component |
TH
Table Header Component Props
Prop | Type | Description |
---|---|---|
column |
string | Column identifier |
children |
components | Column text |
Other props will be passed to the th
component such as className
, colSpan
...etc.
Example
{ superprops thisstate = params: sort: 'id' direction: 'asc' } // fetch data for the first time { thisprops } // fetch only when params get updated { if thisstateparams !== prevStateparams thisprops } // update params state when sortable column is clicked { this } { const sort direction = thisstateparams return <table className="table table-hover table-bordered"> <thead> // Here is the TR and TH components <TR sortKey=sort sortDir=direction onChange=thishandleSortChange> <TH column="id">ID</TH> <TH column="name" className="w-50" colSpan=2>Employee Name</TH> <TH column="role">Role</TH> <TH column="status">Status</TH> <TH>Actions</TH> </TR> </thead> <tbody> <tr> ... </tr> </tbody> </table> }
TODO:
- allow to customize the internal class names
- write test
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
License
The gem is available as open source under the terms of the MIT License.