Global configuration

If your site contains many tables, it is possible to define common properties that will be applied to all through the <InitTables /> provider.

App.tsx

function App() {
    return (
        <InitTables
            breakpoint={BREAKPOINT.SM}
            headerRenderer={DefaultHeaderCell}
            cellRenderer={DefaultTableCell}
            baseRowClasses='cursor-pointer'
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}>
            <GlobalConfigurationTable />
        </InitTables>
    );
}

GlobalConfigurationTable.tsx

function GlobalConfigurationTable() {
    // Render
    return <Table<Person> indexKey='id' data={people.slice(0, 3)} columnConfigs={peopleColumns} />;
}

columns.ts

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 }
];

Live example

info

You can always override a property of <InitTables /> by redefining it on <Table />

Global properties