React DataList

React DataList is a lightweight, fast and fully customized component for creating data tables with sorting, filtering and paging support. An excellent choice for the admin centers or the control panels.

Installing

npm install @snakedin/react-data-list

Usage without Bootstrap

By default, DataList uses Bootstrap styles to show tables. If you want to use DataList without Bootstrap, you need to import an additional file with styles:

import '@snakedin/react-data-list/dist/themes/without-bootstrap.css';

Demo examples

• Features demo
• Static data
• Paging and sorting
• FetchProvider helper
• Advanced filtering
• ReactRouter helper
• Custom filters

API Reference

DataList

|Prop name|Type|Description|Default value| |----|----|----|----| |classNameHead|String|Table head (<thead>) class name|"thead-light"| |classNamePager|String|Page list (<ul>) class name|"pagination mb-0 justify-content-center justify-content-lg-start"| |classNameRow|String|Table content rows (<tr>) class name|""| |classNameTable|String|Table (<table>) class name|"table table-striped table-hover table-bordered"| |defaultFilter|Object|Initial filter values (name: value)|{}| |defaultPager|Object|Initial pager and sort by values|{ page: 1, pageSize: 10, sortBy: ''}| |enableSorting|Boolean|To disable sorting for all columns, set this param to false|true| |extractId|Function|This function can be used to extract each row unique key.By default component will use the id key.|(item) => item.id| |locale|Object|Object with localized interface elements.|{}| |onError|Function|This function can be used to override the default errors handler.|| |onParamsChanged|Function|This function can be used to override the default params changing behaviour.|| |pageShowMax|Number|Specifies the maximum number of pages to be displayed in the page bar.|10| |pageSizes|Array of numbers|An array of allowed page sizes. Also it will be used in switch page sizes dropdown list.|[10, 20, 30]| |provider|Function, Array|Required. The data provider for the view. It can be an array of objects, an async function, or an instance of the special FetchProvider helper class.|| |renderError|Function|This function can be used to override the default error message.|| |renderLoading|Function|This function can be used to override the default loading indicator.|| |renderPageBar|Function|This function can be used to change page bar render.|| |renderPageSummary|Function|This function can be used to change page summary text.|| |renderTemplate|Function|A function that receives table and pageBar arguments and is used to determine the order of displaying component's parts. For example, you can show page bar above the table or show two page bars above and below the table.|| |showFilter|Boolean|Whether the filter row should be shown.|true| |showPageBar|Boolean|Whether the page bar should be shown.|true| |showPageNext|Boolean|Whether the "Next page" button should be shown.|true| |showPagePrevious|Boolean|Whether the "Previous page" button should be shown.|true|

Column

|Prop name|Type|Description|Default value| |----|----|----|----| |contentAttributes|Object|The HTML attributes for the content cell td.|| |headerAttributes|Object|The HTML attributes for the head cell td.|| |id|String|Required. The unique ID for the column.|| |filter|Object, Function, Boolean|If true is passed, text input will be used for filtering.If false is passed, filtering will be disabled for this column.If object is passed, this object should contain type field (text, select, react-select or date).You can use your own filters by passing a function in this property.|true| |label|String|Label to be displayed in the header cell. If this property is not set, id of the column will be used.|| |sort|String, Boolean|If true is passed, column's id will be used for sorting.If string is passed, this string will be used for sorting. If false is passed, sorting will be disabled for this column.|true| |value|Function|By default, item[Column's ID] will be used to display in the cell.This function can be used to change the rendered value in the cell.||

Development

If you want to experiment with examples in your local environment:

$ git clone https://github.com/snakedin/react-data-list.git .
$ npm install 
$ npm start