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: