@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
    

    Install

    npm i @snakedin/react-data-list

    DownloadsWeekly Downloads

    5

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    167 kB

    Total Files

    29

    Last publish

    Collaborators

    • avatar