Skip to main content

Quick start

reTables wants to minimize the code needed to render a table. All you need to get started is:

note

The following examples use the people array presented early in the doc.

Core concepts​

Let's start by looking at the core concepts of reTables.

Data key​

When rendering a table, reTables needs an internal key to identify uniquely every object in the array. Generally this key is id but you can specify any property, even the nested ones.

In the people example you can use id or other values, as your dataKey, such as contacts.phone or about.job.

caution

Make sure that all the objects in the array have an unique dataKey value. Duplicated entries can cause problems during sorting or pagination.

NestedKeyOf type​

Many props, like the previous dataKey example, use NestedKeyOf as a type. This is basically a glorified keyof, which allows you to access nested properties in a dotted notation. Here is the list of the inferred values for People.

import Person from 'src/types';
import { NestedKeyOf } from 'retables';

type PersonKeys = NestedKeyOf<Person>;
// type PersonKeys = "id" | "company" | "about.firstName" | "about.lastName" | "about.job" | "about.age" | "contacts.address" | "contacts.phone"
info

Arrays, dates and optional properties are excluded from NestedKeyOf<T>. In some occasions, like the columns configuration, reTables uses NestedKeyOfWithOptionals<T> type which allows optional properties.

Column config​

Every table needs its column config. This is an object that describes which columns need to be displayed and how to retrieve data for each of it.

import { ColumnConfig } from 'retables';
import { Person } from '@site/src/data';

export const peopleColumns: ColumnConfig<Person>[] = [
    { title: 'Id', key: 'id', flex: 0.5 },
    { title: 'Last name', key: 'about.lastName' },
    { title: 'Age', key: 'about.age', flex: 0.5 },
    { title: 'Job', key: 'about.job', flex: 1.5 },
    { title: 'Company', key: 'company', flex: 1.5 }
];

A basic column config needs:

  • title (string): Column name that will be displayed in the header
  • key (NestedKeyOfWithOptionals<T>): Object key that selects the property. (This will also effect sorting)

As shown above, you can also specify a flex property (defaults to 1) that indicates the horizontal weight of each column. A complete list of the API can be found here.

Breakpoints​

Some of the table props can be personalized, based on the current width of the screen.

By default, below the BREAKPOINT.MD, the mobile version of the table will automatically be displayed.


info

The BREAKPOINT enum is directly exported from reTables.

Your first table​

This is all you need to do in reTables to render minimal sortable and responsive table.

function QuickStartTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 3)}
            columnConfigs={peopleColumns}
            baseHeaderClasses='font-bold bg-gray-100 dark:bg-stripe'
            baseCellPadding={{
                horizontal: '10px',
                vertical: '10px'
            }}
        />
    );
}

export default QuickStartTable;

info

All the tables on the documentation site are rendered using reTables. Head over to the Live example tab to see the result!

note

Note that here we have also applied to the header some personalization, using baseHeadersClasses and baseCellPadding. More of these options will be explained in the next section.