table-page-search

material-ui table with opinionated styling

Install

npm install table-page-search

Example

The following example shows a table with all the functionality: Running Example

Sample Header Config

Each column of the config should have a "fieldSort" or "display" field in order to show data in the cell.

const headerConfig = {
    key: "id",
    itemsPerPage: 8,
    defaultSort: "lastName",
    sortDescending: true,
    columns: [
        { fieldForSort: "firstName", columnLabel: "Name First", headerCellStyle:{width:80} },
        { fieldForSort: "lastName", columnLabel: "Name Last", disableCellClick: true },
        { fieldForSort: "location.city", columnLabel: "Location" },
        {
            display: (row, columnConfig, onRowClick)=> `${row.lastName}, ${row.firstName}`,
            columnLabel: "Full Name"
        }
    ]
};
//Sample Data
const users = [
    {
        "id": 0,
        "firstName": "Cassandra",
        "lastName": "Andrews",
        "location": { "city" : "Dotseron" }
    },
    {
        "id": 1,
        "firstName": "Lakisha",
        "lastName": "Alvarez",
        "location": { "city" :  "Winfredes" }
    }
];

Sample Component Use

  <TablePaging  loading={loading}
                dataList={users}
                headerConfig={headerConfig}
                filterText={filterText}
                useMaterialUiPaging={true}
  />

Server Side Paging

The following options can be used for server side paging. For server side paging, the "dataList" should have the same number of records or less than the "itemsPerPage" of the "headerConfig" object.

"totalRecordsFromServer" = since the dataList only has one page of data, the total number of records is required to render the page buttons and display total record count to the user.

"onServerSidePaging" = This is call any time a sort or page change happens. The fields that are provider are : {sortField, sortDescending, activePage}.

"restPageNumber" = this value is ignored if less than zero and should be a number between 1 and the number of pages. When the value is greater than zero, the page number will be set active for the page buttons