CataUiTable

The CataUiTable component provides a flexible data table with features like column sorting, row selection, and customizable cell rendering. It's designed to display tabular data in a structured format with support for various data types.

ID	Delivery Name	Market	Created Date
1	The first element	Denmark	3/15/2023
2	The Second element	IE	2/15/2023
3	The Third element	UK	1/15/2023
4	The Last element	UK	1/15/2023
5	The first element	Denmark	3/15/2023
6	The Second element	IE	2/15/2023
7	The Third element	UK	1/15/2023
8	The Last element	UK	1/15/2023
9	The Second element	IE	2/15/2023
10	The Third element	UK	1/15/2023
11	The Last element	UK	1/15/2023
12	The Second element	IE	2/15/2023
13	The Third element	UK	1/15/2023
14	The Last element	UK	1/15/2023

<CataUiTable :rows="rows" :columns="columns" v-model:selected-rows="selectedRows" v-model:sorted-column="sortedColumn" selectable>
    <template #tableCell="{ tableCell, tableColumn, tableRow }">
        <!-- This should be custom, according to your application requirements -->
        <template v-if="tableColumn.type === 'string'">
            {{ tableCell }}
        </template>
        <template v-if="tableColumn.type === 'date'">
            {{ new Date(tableCell).toLocaleDateString() }}
        </template>
        <template v-if="tableColumn.type === 'actions'">
            <CataUiDropdown :actions="tableCell" type="dots" size="small" />
        </template>
    </template>
</CataUiTable>

Tips

Each table cell is the value of the row key that matches the column id row[column.key].

Props

Prop	Description	Type	Default	Required
columns	Array of column definitions for the table	Array		true
fixedHeader	Fix the header to the top of the table when scrolling	Boolean	false	false
rows	Array of data rows to display in the table	Array		true
selectable	Enable row selection with checkboxes	Boolean	false	false
v-model:selected-rows	Array containing selected row IDs	Array	[]	false
v-model:sorted-column	Object containing sorting configuration for the table	Object	{}	false

Warning

The v-model value sorted-column MUST be in the following format: { sortOrder: 1, sortColumn: '' }

Where:

sortOrder: 1 for ascending, -1 for descending
sortColumn: The column key to sort by

Slots

Slot	Description
tableCell	Scoped slot with access to `tableCell`, `tableColumn`, `tableRow`

Emits

Emit	Description
tableCellClicked	Emitted when a table cell is clicked, with object containing `id`, `column`, and `event`
toggleSelectAll	Emitted when the select-all checkbox in the header is toggled
toggleSelectRow	Emitted when an individual row checkbox is toggled, with row id as parameter

Data Structure Examples

Column Definition

const columns = [
    {
        key: 'id',           // Unique identifier for the column, matches property in row data
        label: 'ID',         // Display label for the column header
        type: 'string',      // Data type (string, date, actions, etc.)
        style: '',           // Optional CSS styles for the column
        sortable: true,      // Whether the column can be sorted
    },
    {
        key: 'market',
        label: 'Market',
        type: 'string',
        style: '',
        sortable: true,
    },
    {
        key: 'created',
        label: 'Created Date',
        type: 'date',
        style: '',
        sortable: true,
    },
    {
        key: 'actions',
        label: 'Actions',
        type: 'actions',
        style: { width: '1%', textAlign: 'right'}, // Can use object for complex styles
        sortable: false,
    }
]

Row Definition

const selectedRows = ref([]);
const sortedColumn = ref({});

const rows = [
    {
        id: '1',                                 // Unique identifier for the row
        name: 'The first element',               // Data properties matching column keys
        market: 'Denmark',
        created: '2023-03-15T15:26:31.597',
        actions: dropdownActions,                // Can contain complex objects
        disableTableRow: true,                   // Optional: disable selection for this row
    },
]

Sorting State

const sortedColumn = ref({
    sortOrder: 1,           // 1 for ascending, -1 for descending
    sortColumn: 'name'      // Key of the column being sorted
});