React Sleek Table
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://drouillard.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-sleek-table
Usage
;;; { 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: PropTypes.array.isRequired,
- columns: PropTypes.array.isRequired,
- style: PropTypes.object,
- iconStyle: PropTypes.object,
- iconDesc: PropTypes.node,
- iconAsc: PropTypes.node,
- iconBoth: PropTypes.node,
- id: PropTypes.string,
License
Acknowledgements
Based on react-sortable-table