CataUiTableFooter

The CataUiTableFooter component provides a footer area for displaying and managing selected table rows. It includes functionality for showing and hiding selected rows, deselecting rows, and adding custom action buttons.

<CataUiTableFooter class="footer"
    v-if="selectedRows && selectedRows.length"
    v-model:selectedRows="selectedRows"
    :columns="columns"
    :rows="rows">
    <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>
    <template #footerbuttons>
        <CataUiButton
            class="ml-10"
            type="primary"
            label="Bulk Action" />
        <CataUiDropdown
            class="ui-actions"
            :actions="dropdownActions" />
    </template>
</CataUiTableFooter>

Props

Prop	Description	Type	Default	Required
columns	An array of column definitions for the table	Array		true
rows	An array of all available data rows	Array		true
v-model:selectedRows	Contains the IDs of the selected rows	Array	[]	true

Slots

Slot	Description
footerbuttons	A slot on the right side of the footer header for adding custom action buttons or dropdowns
tableCell	A scoped slot with access to `tableCell`, `tableColumn`, and `tableRow` objects for custom cell rendering

Events

The component automatically emits update:selectedRows event when the selection changes, as part of the v-model binding.

Data Structure

Column Definition

const columns = [
    {
        key: 'id',        // Property name in row objects
        label: 'ID',      // Display label for the column
        type: 'string',   // Data type (string, date, actions, etc.)
        style: '',        // Optional inline styles for the column
        sortable: true,   // Whether the column is sortable
    },
    // Additional columns...
];

Row Data

const rows = [
    {
        id: 1,           // Unique identifier for the row
        name: 'Example Item',
        market: 'Denmark',
        created: '2023-03-15T15:26:31.597',
        // Additional properties according to column definitions
    },
    // Additional rows...
];

Example Usage

const dropdownActions = [
    {
        id: 1,
        icon: 'bi-person-fill',
        label: 'Some action 1',
        disabled: false,
        divider: false,
    },
    {
        id: 2,
        icon: 'bi-trash3',
        label: 'Some action 2',
        disabled: false,
        divider: false,
    },
];

const selectedRows = ref([1, 2]);

const rows = ref([
    {
        id: 1,
        name: 'The first element',
        market: 'Denmark',
        created: '2023-03-15T15:26:31.597',
    },
    {
        id: 2,
        name: 'The Second element',
        market: 'IE',
        created: '2023-02-15T15:26:31.597',
    },
    {
        id: 3,
        name: 'The Third element',
        market: 'UK',
        created: '2023-01-15T15:26:31.597',
    },
]);

const columns = [
    {
        key: 'id',
        label: 'ID',
        type: 'string',
        style: '',
        sortable: true,
    },
    {
        key: 'name',
        label: 'Delivery Name',
        type: 'string',
        style: '',
        sortable: true,
    },
    {
        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' },
        sortable: false,
    }
];

CataUiTable - Use with this component to create a complete table solution