Skip to main content

Responsiveness

Table of contents​

As mentioned in the quickstart section, the Table component is able to scale to various page sizes (see breakpoints) to ensure a good experience for all users.

You are able to:

Hide columns​

To hide a particular column under a specific breakpoint you need to use the showAt property of ColumnConfig.

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

Try to resize the page and see how the table in the Live example changes.

note

Hided columns will still be visibile in the the table mobile version.

Mobile version​

The mobile version of the table is enabled by default under BREAKPOINT.MD. Since every table in the docs is renderer using reTables, you can see this by yourself heading over to one of the Live examples. In the following example, for demonstration purposes, we will force the mobile view on all screens.

To customize this behavior use the breakpoint prop of <Table /> component.

function ResponsivenessTable() {
    return (
        <Table<Person>
            indexKey='id'
            breakpoint={BREAKPOINT.DOUBLEXL}
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
        />
    );
}