A React module that can be used for rendering tables with dynamically paginated data

ReactJs Server Side Table

A React module that can be used for rendering tables with dynamically paginated data.

Quick Features

  • Dynamic pagination
  • Sorting by columns
  • Searching
  • Language support (Currently -> English and Turkish)
  • Styless design. You can style the table as you like

Installation

npm install reactjs-server-side-table

API

Option Description Required Default Value
tableColumns Columns of the table. Must be same format with the example code. Since this module uses react-table as a base package, for more advance usage, you can check out the react-table docs and use the column properties there. true
tableData Array of data that is currently displayed on the table. true
totalDataCount Total data count that table will be displayed on the all pages. This is used for arranging pagination. true
pageSizes Array of how many data will be displayed on a page. You can switch between the numbers for changing how many data will be displayed on a page. false [10, 20, 30, 40, 50]
defaultSortBy Initial sorting column and direction value. false First column – ascending order
getTableInfo Option for returning current table information, such as: pageIndex, pageSize, searchText, sortBy, sortDir. You can get the table’s current information and get data according to this information.
language Language of the table. Supports: “tr” for Turkish and “en” for English. false en
tableStyle Inline style for table’s <table> tag false
theadStyle Inline style for table’s <thead> tag false
thStyle Inline style for table’s <th> tag false
tbodyStyle Inline style for table’s <tbody> tag false
trStyle Inline style for table’s <tr> tag false
tdStyle Inline style for table’s <td> tag false

Sample Code

NOTE: Column accessor values must match with keys from the elements of the data. For example if accessor value is ticket_id, then data should be [{ticket_id: 1, ...etc}, ...etc]

For more information about columns: React-Table

import React, { useEffect, useState } from 'react';
import ServerSideTable from 'reactjs-server-side-table';

  function App() {
    const columns =  [
        {
          Header: "Ticket No",
          accessor: 'ticket_id'
        },
        {
          Header: `Reference`,
          accessor: 'reference',
          Cell: ({ row: { original } }) => (
            <div>
                {original.reference ? original.reference : '-'}
            </div>
          )
        }
      ]

    const [ticketList, setTicketList] = useState([]);
    const [ticketCount, setTicketCount] = useState(0);
    const [tableInfo, setTableInfo] = useState({});

    useEffect(() => {
  
      fetchTickets();
  
    }, [tableInfo]);

    const fetchTickets = () => {
        //fetch new data with tableInfo state
    }

    return (
      <div>
        {
          ticketList.length > 0 && ticketCount > 0 ? 
  
            <ServerSideTable
            tableColumns={columns}
            tableData={ticketList}
            totalDataCount={ticketCount}
            pageSizes={[10, 50, 100]}
            defaultSortBy={[{id: 'ticket_id', desc: true}]}
            getTableInfo={info => setTableInfo(info)}
            tableStyle={{backgroundColor: "#bbbbbb"}}
            language='en'
            />
    
            : <></>
  
        }

      </div>
    );

  }

You can fetch your data with the current tableInfo state from your server.

Table Information

tableInfo state returns this:

{sortBy: 'ticket_id', sortDir: 'desc', pageIndex: 3, pageSize: 10, searchText: '2'}

totalDataCount = 41

for a table like this:

GitHub

View Github