OpenSRP Table

This provides an OpenSRPTable component that can be used to display data on a page. It adds an extra abstraction layer over react-table that makes it much easier to use within the more limited scope of opensrp-web. Currently it only re-exposes the sorting api from react-table.

Installation

yarn add @opensrp/opensrp-table

Options

• tableColumns(Column as defined by react-table
  • required
  • A memoized array of columns, see example below
• data(< T >)
  • required
  • an array of items to be displayed on the grid

an example

import React from 'react';
import { OpenSRPTable } from '@opensrp/opensrp-table';
import '@opensrp/opensrp-table/dist/index.css';

export const useColumns = () => {
    return React.useMemo(() => [
        {
            Header: 'First Name',
            accessor: 'firstName',
        },
        {
            Header: 'Last Name',
            accessor: 'lastName',
        },
    ],[]);
};

const data = [
    { firstName: 'Soap', lastName: 'MacTavish' },
    { firstName: 'captain', lastName: 'Price' },
];

const CustomTable: React.FC<ANCTableProps> = () => {
    return <OpenSRPTable {...{ data, tableColumns: useColumns() }} />;
};