1.0.7 • Published 5 years ago

react-simpliest-table v1.0.7

Weekly downloads
4
License
ISC
Repository
github
Last release
5 years ago

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

PropertyTypeDefaultDescription
listarray[]The whole list to filter
filterFunctionfunctionnullSpecified the fields where the input filter should find coincidences, filter value will be compared with the returned value on this function
iterateFunctionfunctionnullDefines how the tbody will be builded, the function must returns one array of tr elements
fieldsarray[]Contains the header elements
defaultMaxRecordPerPageinteger25Describes how many records per page will be render
defaultSorterjsonnullWhen 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")
labelsjsonSee down on Custom LabelsAllows 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
PropertyTypeDefaultDescription
textstringnull is requiredText to show on the thead td
parameterstringnullindex to find in the list object, allows the sort function
sortablebooleantrueDefines 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

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.0

5 years ago