Fácil Table

A simple table built in React with customizable sorting and data formatting options.

Why Fácil

Fácil means easy in Spanish. ¿Por qué no?

Install

yarn add react-facil-table

Sample Usage

/* @flow */
import FacilTable from 'react-facil-table';

type SortFunction = (data: any) => any;
type Field = {
	caption: string,
	property: string | ((data: Object) => string | React$Element<any>),
	sortFunction?: SortFunction,
};

<FacilTable
  defaultSortFieldIndex: 0, // Initial field index to sort by
  defaultSortDirection: 1, // Sort direction 1 for Ascending -1 for Descending
  ascendingElement: <span>↓</span>, // Customize sort icons to match your theme
  descendingElement: <span>↑</span>,
  classNames: {
    table: 'some-class', // Custom class name for table for just in case
  },
  fields={[
		{
			caption: 'Name',
			property: 'name',
		},
		{
			caption: 'Age',
			property: 'age',
		},
		{
			caption: 'birthday',
			property: d => `${d.birthday.getMonth()} - ${d.birthday.getFullYear()}`,
			sortFunction: d => d.birthday,
		},
		{
			caption: 'Longest word known',
			property: d => `${d.longestWord} - (${d.longestWord.length})`,
			sortFunction: d => d.longestWord.length,
		},
	]}
	collection={[
		{
			name: 'Gabe',
			age: 21,
			birthday: new Date(1990, 1, 1),
			longestWord: 'Pneumonoultramicroscopicsilicovolcanoconiosis',
		},
		{
			name: 'Sydney ',
			age: 20,
			birthday: new Date(1989, 2, 1),
			longestWord: 'Antidisestablishmentarianism',
		},
	]}
/>

Sample Output