Sortable Table in React.js
Feature
- Simple API
- Customizable style
- Customizable sorting functions
This component is depends on Font Awesome
Please activate Font Awesome. Get started with Font Awesome
LICENSE of Font Awesome
Example
https://rudolph-miller.github.io/react-sortable-table
- ID: default sorting
- rendered as
<a>
tag.
- rendered as
- NAME: custom sorting function that sort names by the family name
- CLASS: unsortable
Install
npm install react-sortable-table
Usage
windowReact = ;;;; { return name0} const FamilyNameSorter = { var result = data; return result; } { return data }; { super thisstate = data: id: 3 name: 'Satoshi Yamamoto' class: 'B' id: 1 name: 'Taro Tanak' class: 'A' id: 2 name: 'Ken Asada' class: 'A' id: 4 name: 'Masaru Tokunaga' class: 'C' ; } { const columns = header: 'ID' key: 'id' defaultSorting: 'ASC' headerStyle: fontSize: '15px' backgroundColor: '#FFDAB9' width: '100px' dataStyle: fontSize: '15px' backgroundColor: '#FFDAB9' dataProps: className: 'align-right' { return <a href='user/'+id>id</a>; } header: 'NAME' key: 'name' headerStyle: fontSize: '15px' headerProps: className: 'align-left' descSortFunction: FamilyNameSorterdesc ascSortFunction: FamilyNameSorterasc header: 'CLASS' key: 'class' headerStyle: fontSize: '15px' sortable: false ; const style = backgroundColor: '#eee' ; const iconStyle = color: '#aaa' paddingLeft: '5px' paddingRight: '5px' ; return <SortableTable data=thisstatedata columns=columns style=style iconStyle=iconStyle /> ; } ;
PropTypes
- data: React.PropTypes.array.isRequired
- columns: React.PropTypes.array.isRequired
Copyright
Copyright (c) 2015 Rudolph-Miller (chopsticks.tk.ppfm@gmail.com)
License
Licensed under the MIT License.