react-simpliest-table

React Simpliest Table is a react table filterable, sortable, and pagination. Was prepared under Bootstrap styles.

This React component was inspired by the DataTables.net plugin.

Installation

You can install react-simpliest-table component using the npm package manager:

npm install --save react-simpliest-table

Dependencies

This component peer depends on the React library

You can install React using npm too:

npm install --save react

Usage

import React from 'react';
import Table from 'react-simpliest-table';

const example = ({list = []})=>{
    return (
        <Table
            list={list}
            filterFunction={record => record.name + " " record.second_columns}
            defaultMaxRecordPerPage={25}
            defaultSorter={{ parameter: "name", order: "DESC" }}
            iterateFunction={(record) => {
            return (
                <tr key={record.name}>
                    <td>
                        <img src={record.image} alt={record.name} style={{ width: "45px", height: "45px" }} />
                    </td>
                    <td>{record.name}</td>
                    <td>{record.second_column}</td>
                </tr>
            )
            }}
            fields={[{
                text: ""
            },{
                text: "Name",
                parameter: "name"
            }, {
                text: "Second Columnd",
                parameter: "second_column"
            }]} />
    )
}

Properties

| Property | Type | Default | Description | | --------------- |:--------------:|:--------:|:------------| | list | array | [] | The whole list to filter | | filterFunction | function | null | Specified the fields where the input filter should find coincidences, filter value will be compared with the returned value on this function | | iterateFunction | function | null | Defines how the tbody will be builded, the function must returns one array of tr elements | | fields | array | [] | Contains the header elements | | defaultMaxRecordPerPage | integer | 25 | Describes how many records per page will be render | | defaultSorter | json | null | When there are sorter columns, this is the default sorter param, the object should has this structure: { "parameter": "index_name_in_the_list", "order": ("ASC" || "DESC")| |labels | json | See down on Custom Labels | Allows to change the text labels or put your own translation |

Fields property

Contains the header elements, You must use the follow properties, is and json array.

For example:

[{
    text: ""
},{
    text: "Name",
    parameter: "name"
}, {
    text: "Second Columnd",
    parameter: "second_column"
}]

Params

| Property | Type | Default | Description | | --------------- |:--------------:|:--------:|:------------| | text | string | null is required | Text to show on the thead td | | parameter | string | null | index to find in the list object, allows the sort function | | sortable | boolean | true | Defines if the column allow sort |

Examples

Empty header

    {
        "text": ""
    }

No sortable header

    {
        "text": "This is no sortable title",
        "sortable": false
    }

Sortable header

    {
        "text": "This is no sortable title",
        "parameter": "my_title_index"
    }

In this case, the table will be sorted by the my_title_index in the list object ascending or descending.

Custom labels

Is a Json object with the labels description, by default the labels is in english, so you should be change it by your own language.

The default object is:

{
    "all": "All",
    "records_per_page": "Records per page",
    "showing": "Showing",
    "to": "to",
    "of": "of",
    "rows": "rows",
    "no_data": "No records yet,",
    "no_data_filtered": "No value matches your filter",
    "filter": "Filter",
}

If you want to change it, here there is an example:

   <Table
        list={list}
        filterFunction={record => record.name + " " record.second_columns}
        labels={
            "all": "Mostrar todos",
            "records_per_page": "Registros por página",
            "showing": "Está mostrando",
            "to": "a",
            "of": "de",
            "rows": "filas",
            "no_data": "Tu listado está vacío",
            "no_data_filtered": "Sin coincidencias filtradas",
            "filter": "Pon tu filtro aquí"
        }

Live Demo

You can see the Live demo here

Examples

You can see some examples here

License

This component is released with ISC License