@snakedin/react-data-list

1.0.2 • Public • Published

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

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

Package Sidebar

Install

npm i @snakedin/react-data-list

Weekly Downloads

56

Version

1.0.2

License

MIT

Unpacked Size

167 kB

Total Files

29

Last publish

Collaborators

  • snakedin