reactjs-server-side-table v0.1.12

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

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: