Skip to main content

Basic personalization

Table of contents​

In this page you will learn how to:

info

As referenced before, please keep in mind that, for semplicity, all the examples use Tailwind as css framework. However, reTables does not restrict you in any way when choosing how to handle css.

Apply custom classes​

You can start customizing your table from the basics by specifying css classes on the various elements.

Basic example​

function BasicPersonalizationTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 3)}
            columnConfigs={peopleColumns}
            className='cursor-pointer' // Change the cursor when hovering on the table
            baseHeaderClasses='font-bold bg-gray-100 dark:bg-stripe' // Assign background to the header
            baseRowClasses='py-2' // Apply a base vertical padding
        />
    );
}
note

This is not the recomended way to apply padding and it's only for demostrating purposes. Visit this section to know more

Custom row style depending on row index​

In the case of the row, there is also the possibility to specify different classes according to the index of the row. This is useful, for example, when you want to insert different colors on every other row to make reading easier.

function BasicPersonalizationTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 3)}
            columnConfigs={peopleColumns}
            className='cursor-pointer'
            baseHeaderClasses='font-bold'
            // Apply custom classes based on the row index
            baseRowClasses={index => {
                let baseClasses = 'py-2';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
        />
    );
}
note

Note that you have also access to the isSelected information. Please visit the Selection page of the documentation to know more about it.

Default cell spacing​

Note that you have also access to the isSelected information. Please visit the Selection page of the documentation to know more about it.


function BasicPersonalizationTable() {
    return (
        <Table<Person>
            indexKey='id'
            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`;
            }}
            // Add custom cell padding
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
        />
    );
}
note

For more advanced use you can apply spacing yourself, using custom renderers.

Edit the grid appereance​

The <Table /> component accepts a gridConfig object with the following properties:


function BasicPersonalizationTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={index => {
                let baseClasses = 'text-sm cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            // Add custom grid config
            gridConfig={{
                showExternLines: EXTERN_LINE_GROUP.NONE,
                showHorizontalLines: true,
                showVerticalLines: false,
                color: '#606770'
            }}
        />
    );
}
info

Instead of specifying all the EXTERN_LINES or none of them inside the showExternLines, you can use EXTERN_LINE_GROUP.NONE or EXTERN_LINE_GROUP.ALL.