DataTable

Inspired by Ant table API.

API

Property	Description	Type	Default
data_source	Array of all row objects	object[]	-
columns	Array of objects that configure columns	object[]	-
footer	Object with [data_index]: 'text' key-value pairs	object	-
has_fixed_header	Bool that controls fixed header	boolean	false
is_full_width	Applies max width styling to the table. Content is bounded by $MAX_CONTAINER_WIDTH sass constant, but row and header backgrounds span full width.	boolean	false

How to use

const example_data_source = [
    {
        name: 'Bob',
        second_name: 'Marly',
    },
    {
        name: 'Rick',
        second_name: 'Sanches',
    },
];

const example_columns = [
    {
        title: 'Name',
        data_index: 'name',
    },
    {
        title: 'Second name',
        data_index: 'second_name',

        // optional render cell function
        renderCell: (data, data_index, transaction) => {
            // data - cell's text value (transaction[data_index])
            // data_index - column's data_index ('second_name' in this case)
            // transaction - row object
            // return a modified <td>

            return <td className={data_index} key={data_index}>{data}!!!</td>
        }
    },
];

const example_footer = {
    second_name: 'second name footer text'
};

<DataTable
    data_source={example_data_source}
    columns={example_columns}
    footer={example_footer}
/>