React Simple Table

Intention

The table should be as easy as possible to use.

Installation

yarn

yarn add @postadress/react-simple-table

npm

npm install @postadress/react-simple-table

Usage

React Simple Table uses the location for storing filter strings. Therefore it mus be used inside a Router component.

A basic example:

import React, { FC } from 'react';
import { SimpleTable } from '@postadress/react-simple-table';
import { Field } from '@postadress/react-simple-table/dist/table';

export const Component: FC = () => {
  const fields: Field[] = [
    {
      name: 'ID',
      identifier: 'id',
      width: 10,
    },
    {
      name: 'First Name',
      identifier: 'firstName',
    },
    {
      name: 'Last Name',
      identifier: 'lastName',
    },
    {
      name: 'Age',
      identifier: 'age',
      type: 'number'
    },
  ];

  const data = [
    {
        id: 1,
        firstName: 'Johnny',
        lastName: 'Lawrence',
        age: 50,
    },
    {
        id: 2,
        firstName: 'Daniel',
        lastName: 'LaRusso',
        age: 50,
    },
    {
        id: 3,
        firstName: 'Miguel',
        lastName: 'Diaz',
        age: 17,
    },
    {
        id: 4,
        firstName: 'Samantha',
        lastName: 'LaRusso',
        age: 17,
    }
  ];

  return (<SimpleTable fields={fields} data={data} />);
};

The above example will lead to a table like this:

Api

Field

Interface for column definitions.

Property	Type	Optional	Default	Purpose	Example
name	string	no		This is the name of the column and therefore it is shown in the header row.	name: 'First name'
identifier	string	no		Technical identifier for the column. The name must not be unique, the identifier must.	identifier: 'firstName'
width	number	yes		The with of the column in px.	width: 120
formatter	function	yes		A callback function which is used to render the cell content.	(val, name, row) => <>{'#' + val}</>
getSortValue	function	yes		A callback function which is used to sort rows.	(val, name, row) => dateToIso(val);
getFilterValue	function	yes		A callback function which is used to filter rows.	(val, name, row) => dateToGermanDate(val);
onEdit	function	yes		A callback function which is called, when the row is edited.	(val, field, row, index) => alert(val);
type	'button', 'checkbox', 'color' *	yes	text	HTML5 input types. Used to render edit input fields.	type: 'date',
editable	boolean	yes	false	If true, the cell can be edited by double clicking on it.	editable: true

* 'button' | 'checkbox' | 'color' | 'date' | 'datetime' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'

DatatableProps

Interface to configure the table itself.

Property	Type	Optional	Default	Purpose	Example
fields	Field[]	no		The field definitions to be used by the table.	fields: [{name: 'name', identifier: 'name'}]
data	any[]	no		The data to be presented in the table.	[{name: 'Johnny Lawrence'}, {name: 'Daniel LaRusso'}]
showFilter	boolean	yes	false	If true the filter widget above the table is is visible.	showFilter: true
hideResultCount	boolean	yes	false	If true the result count above the table is is invisible.	hideResultCount: true
identifier	string	yes	'filter'	Used to discriminate different tables on a page. The main purpose is: It is used in the location portion of the URL, to decide, to which table a filter belongs.	identifier: 'mainTable'
lang	string	yes	'en'	Used for i18n. Currently only English and German is available.	lang: 'de'
showDownload	boolean	yes	false	When true, a download button will be visible in top of the table.	showDownload: true
customDownloadFunction	(tableData: any[]) => void	yes		Callback function, which will be triggered when clicking the download button (showDownload must be set to true)	customDownloadFunction: (tableData: any[]) => apiCall()
pageSize	number	yes	1000	Amount of rows which will be presented in viewport before rerendering the next chunk. When onFetchAdditionalResults is set, it will be triggered when the amount is reached.	pageSize: 100
onFetchAdditionalResults	() => void	yes		Callback function which will be triggered when the user scolls to the bottom to the table. Uses pageSize.	onFetchAdditionalResults: (tableData: any[]) => apiCall()
disableSorting	boolean	yes	false	If true, the cell can be edited by double clicking on it.	disableSorting: true
showRowFilters	boolean	yes	false	If true the row filter inputs will be visible.	showRowFilter: true
pageSize	number	yes		If provided, it will be used as the total amount of data instead of the data length.	pageSize: 100

You can find a working example on CodeSandbox.

Contributions are welcome!