Selection

If you need to make your rows selectable you can do it via the selectionConfig prop of <Table />.

You have the ability to render a selector at the start of each line and define a callback for when it's pressed. You can also choose whether to show a global selector for all page elements within the header.

SelectionCell.tsx

import { SelectionRendererProps } from 'retables';

function SelectionCell(props: SelectionRendererProps) {
    return (
        <div className='flex justify-center h-full w-full'>
            <input
                type='checkbox'
                checked={props.checked}
                onChange={props.onChange}
                className='accent-violet-800 dark:accent-violet-200'
            />
        </div>
    );
}

SelectionHeaderCell.tsx

import { SelectionHeaderRendererProps } from 'retables';

function SelectionHeaderCell(props: SelectionHeaderRendererProps) {
    return (
        <div className='flex justify-center h-full w-full'>
            <input
                type='checkbox'
                checked={props.checked}
                onChange={props.onChange}
                className='accent-violet-800 dark:accent-violet-200'
            />
        </div>
    );
}

SelectionTable.tsx

function SelectionTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people.slice(0, 6)}
            columnConfigs={peopleColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={(index, isSelected) => {
                if (isSelected)
                    return 'cursor-pointer !bg-violet-200 dark:!bg-violet-800 dark:text-white';
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            selectionConfig={{
                flex: 0.2,
                initialSelection: [0, 3],
                renderer: SelectionCell,
                headerRenderer: SelectionHeaderCell
            }}
        />
    );
}

columns.ts

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

Live example

info

As mentioned in the Basic Personalization section, you can apply custom row styles only to the selected row.