paginating-sorting

Dynamic table with paging and sorting

for interface paginatingAndSorting of Spring Boot or other aplication with same params. see dataTable example

Parameters

• dataTable = {dataTableProperties}
• onChange = (resp: {order: string, page: number,sort: string}) => void

dataTable properties

Name	Type	Required	Description
content	Array<{[key: string]: any}>	Not	JSONs array to populate the table.
maxItemsShow	number	Not	Maximum amount of items (pages) to show in the pagination. Default 3.
number	number	Yes	Number of the current page
showLastedAndFirst	boolean	Not	Allows to show or not the buttons to go back "«" and forward "»" the next X amount of pages. Default true
showPagination	boolean	Not	Allows to show or not show pagination. Default true
titles	Array<TitleTableProps>	Yes	Titles for table columns.
totalPages	number	Yes	Total pages.

dataTable example

---

{
    "content":[
        {"id": 1,
        "name": "name1",
        "address": {
            "city": "ciudad1",
            "State": "State1",
            "Country": "Country1"
        }}...
    ],
    "number":0,
    "totalPages":10,
    "titles":[
        ...
    ]
}

Titles properties (TitleTableProps)

Name	Type	Required	Description
sort	string	Not	Base text string to return when sorting a column, if not sent, the options in that column are hidden.
name	string or Array<string>	Yes, if you don't send sort	Key to locate the value to show in the column. If it's a nested value, the keys are separated by a period. If you want to concatenate values in a column, the keys are sent in an array.
title	any	Yes	Title to show Columns in the table.

Titles example

---

{"titles":[
    {
        "title":"ID",
        "sort":"id"
    },
    {
        "title":"Address",
        "sort":"city",
        "name":["address.city","address.state"]
    }
]}

How to use

import { Table } from 'paginating-sorting'

const handleChangeTable = (pageAction) =>{
	console.log(pageAction);//order: string, page: number, sort: string
}

<Table dataTable={dataTable} onChange={handleChangeTable}/>