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:

table

GitHub

View Github