@tourmalinecore/react-table-responsive v0.5.0

React-Table-Responsive

Mobile friendly react table component based on react-table using its useFlexLayout hook.

Demo

Table of Content

• Instalation
• Features
• Client Side Table
  • Configuration
    • Column props
  • Sorting
  • Filtration
    • Select Column Filter
  • Actions
    • Action props
  • Table State Persistance
• Server Side Table
  • Table Refresh
  • Configuration
  • Request data
• Unsupported features from react-table

Instalation

The package can be installed via npm:

npm install @tourmalinecore/react-table-responsive --save

Or via yarn:

yarn add @tourmalinecore/react-table-responsive

Do not forget to import styles if you want to use the defafult styling.

should be imported once in your root component

import '@tourmalinecore/react-table-responsive/es/index.css';
import '@tourmalinecore/react-tc-modal/es/index.css';
import '@tourmalinecore/react-tc-ui-kit/es/index.css';

NOTE: You may want to re-style on your own. In that case you don't have to import the styles.

Main Package Features

• Table that supports client side pagination/sorting/filtration. Go to section
• Table that supports server side pagination/sorting/filtration. Go to section
• Single column sorting. Go to section
• Optional persistance of selected sorting, filters, page size, etc. by storing them in the LS.
• Different pagination strategy between mobile and desktop versions of the table.
• Total amount of rows in the footer of the table.
• Actions column. Easy way to create interactive table by adding action buttons to each row. Go to section
• External trigger of the server side table data reloading. Go to section
• Customizable column filtration. You can use your own filter-component or override the default filtration behaviour. Go to section
• Passing react-table props to the underlying engine as is. (not all the features are supported, see the list here)

Client Side Table

The most basic usage of the ClientTable:

import {ClientTable} from '@tourmalinecore/react-table-responsive';

const data = [
    {
      name: 'name1',
      data: 'data1',
    },
    {
      name: 'name2',
      data: 'data2',
    },
  ];

const columns = [
    {
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Data',
      accessor: 'data',
    },
  ];

return(
  <ClientTable
    tableId="uniq-table-id"
    data={data}
    columns={columns}
  />
);

Configuration

NOTE: You can also provide your custom props: anything you put into these options will automatically be available on the instance. E.g. if you provide a function, it will be available from the Cell renderers

Column props

NOTE: You can find more info about react-table props on official docs.

Sorting

This package implements single-column sorting. You can use by adding order property to the Table. It accepts object with such props as id (accessor of the property) and desc (determines sorting direction).

<ClientTable
  tableId="uniq-table-id"
  data={data}
  columns={columns}
  order={{
    id: 'name',
    desc: false,
  }}
/>

Filtration

You can use your own filtration function for standard text input filter:

const columns = [
    {
      Header: 'Status',
      accessor: 'status',
      filter: (rows, columnIds, filterValue) => rows.filter(row.original.status === filterValue),
    },
  ];

OR you can implement a whole new Filter component:

function CustomFilter ({
  column: {
    id,
    filterValue,
    setFilter,
  },
  filterValueOverride,
  setFilterOverride,
  inputPlaceholder,
  }) {
    return (
      <Select
        value={setFilterOverride ? filterValueOverride : filterValue}
        options={selectFilterOptions}
        onChange={(e) => {
          const newFilterValue = e.target.value;

          if (setFilterOverride) {
            setFilterOverride(id, newFilterValue);
          } else {
            setFilter(newFilterValue);
          }
        }}
      />
  );
}

const columns = [
    {
      Header: 'Status',
      accessor: 'status',
      Filter: CustomFilter,
    },
  ];

Select Column Filter

This package also contains ready-to-use SelectColumnFilter, that allows you to filter data by properties with a known set of values, such as status types. Set Filter property to SelectColumnFilter and define selectFilterOptions array, like in the example.

NOTE: To add "All" option in the list, you need to add object with an empty string value to Options array.

import {ClientTable, SelectColumnFilter} from '@tourmalinecore/react-table-responsive';

const columns = [
    {
      Header: 'Status',
      accessor: 'status',
      Filter: SelectColumnFilter,
      selectFilterOptions: [
        {
          label: 'All',
          value: '',
        },
        {
          label: 'Approved',
          value: 1,
        },
        {
          label: 'Declined',
          value: 2,
        }
      ],
    },
  ];

Actions

const data = [
    {
      name: 'name1',
      data: 'data1',
    },
    {
      name: 'name2',
      data: 'data2',
      canBeDownloaded: true,
    },
  ];

const columns = [
    {
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Data',
      accessor: 'data',
    },
  ];

const actions = [
  {
    name: 'open-dictionaries-action',
    show: () => true,
    renderText: () => 'Open Dictionaries',
    onClick: (e, row) => console.log(`Opening Dictionaries for ${row.original.name}`),
  },
  {
    name: 'download-action',
    show: (row) => row.original.canBeDownloaded,
    renderIcon: () => <span>&darr;</span>,
    renderText: (row) => `Download ${row.original.name}`,
    onClick: (e, row) => console.log(`Downloading ${row.original.name}`),
  },
];

return (
  <ClientTable
    tableId="uniq-table-id"
    data={data}
    columns={columns}
    actions={actions}
  />
);

Action props

Table State Persistance

In order not to force the user to choose page size value every time they visit the page, Table instance always stores that value in the Local Storage.

By setting table's property enableTableStatePersistance to true you tell the table to store other settings (filters, sorting and current page) in a const variable, that will be reseted on page reload, but persist between pages in apps with a client-side routing.

Server Side Table

ServerTable is pretty much the same as the ClientTable, but instead of using the whole data at once, it loads data partially from an external source.

import {ServerTable} from '@tourmalinecore/react-table-responsive'

return (
  <ServerTable
    tableId="uniq-table-id"
    columns={[]}
    actions={[]}

    // this props for api calls
    apiHostUrl="https://hosturl"
    dataPath="/api-endpoint"
    requestMethod="GET"
  />
);

Table Refresh

You can manually invoke a table's data update by using the refresh property:

const [refresh, setRefresh] = useState(false);

return (
  <div>
    <button onClick={() => setRefresh(!refresh)}>
      Refresh Table
    </button>
    <ServerTable
      tableId="uniq-table-id"
      columns={columns}
      actions={actions}

      refresh={refresh}
      apiHostUrl="https://hosturl"
      dataPath="/api-endpoint"
      requestMethod="GET"
    />
  </div>
)

Configuration

ServerTable uses some unique props in addition to what client table has:

customDataLoader params

type Params = {
  draw: number,
  page: number,
  pageSize: number,
  orderBy: string,
  orderingDirection: 'desc' | 'asc',
  filteredByColumns: string[],
  filteredByValues: string[],
}

type CustomDataLoader = ({
  url: string,
  method: string,
  headers: {
    [key: string]: string
  },
  params: Params,
  data: {},
  paramsSerializer: (params: Params) => string,
}) => Promise<{
  draw: number,
  list: {
    [tableDataKey: string]: string | number
  }[],
  totalCount: number,
}>

Request data

If you want to use default GET request method you will need to ensure that your backend endpoint can process query consisting of the parameters below:

Example:

https://{app-url}/{endpoint}?draw=2&page=1&pageSize=10&orderBy=name&orderingDirection=desc&filteredByColumns=Name,Surname&filteredByValues=John,Smith

Curl

curl --location -g --request GET 'https://{app url}/{endpoint}?draw=2&page=1&pageSize=10&orderBy=name&orderingDirection=desc&filteredByColumns=Name,Surname&filteredByValues=John,Smith' \
--header 'Authorization: {your aut token}'

Unsupported features from react-table

• Multi-Column sorting
• Virtualization