Last update: February 12, 2024

Table¶

Table is a component that displays data in a tabular format. It is used to display large amounts of data in a structured format.

Usage¶

Include the vc-table component in your Vue application:

vc-table

Basic VueDynamic Views

Create a basic table as follows:

<template>
    <vc-table :columns="tableColumns" state-key="tableStorageKey" :items="tableItems"></vc-table>
</template>

To start using all the available table properties, specify the vc-table component when creating the schema. For example:

{
    id: "tableId",
    component: "vc-table",
    property: "tableItems",
    columns: [
        {
            id: "imageUrl",
            title: "Img",
            width: 60,
            class: "pr-0",
            type: "image",
        },
        // ...
    ]
}

Table API¶

API empowers you to create dynamic and interactive table components to customize its appearance and behavior.

Basic Vue¶

You can easily incorporate the vc-table component into your Vue applications using simple templates.

Props¶

To customize the appearance and behavior of table, use the following props:

Property and Type	Description
`columns` {ITableColumns[]}	Array of table columns. Required.
`items` {T[]}	Array of table items. Default: `[]`. Required.
`itemActionBuilder` {((item: T) => IActionBuilderResult[])}	Function to build item actions.
`sort` {string}	Sort key for the table.
`multiselect` {boolean}	Enable multiselect for the table.
`expanded` {boolean}	Prop to pass from `expanded` blade prop. Default: `true`
`totalLabel` {string}	Label for the total count of items.
`totalCount` {number}	Total count of items. Default: `0`
`pages` {number}	Number of pages in the table. Default: `0`
`currentPage` {number}	Current page in the table. Default: `0`
`searchPlaceholder` {string}	Placeholder text for the search input.
`searchValue` {string}	Value of the search input.
`loading` {MaybeRef}	Loading state of the table.
`empty` {StatusImage}	Image, text and action to display when the table is empty.
`notfound` {StatusImage}	Image, text and action to display when no items are found.
`header` {boolean}	Enable table header. Default: `true`
`footer` {boolean}	Enable table footer. Default: `true`
`activeFilterCount` {number}	Count of active filters. Default: `0`
`selectedItemId` {string}	ID of the selected item.
`pullToReload` {boolean}	Enable pull-to-reload functionality.
`resizableColumns` {boolean}	Enable resizable columns. Default: `true`
`reorderableColumns` {boolean}	Enable reorderable columns. Default: `false`
`reorderableRows` {boolean}	Enable reorderable rows. Default: `false`
`stateKey` {string}	Key to store the table state. Required.
`selectAll` {boolean}	Enable select all functionality.

Emits¶

To interact with the vc-table component, use the emitted events.

Name	Parameters	ReturnType	Description
`paginationClick`	page: `number`	`void`	Emitted when the pagination is clicked.
`selectionChanged`	values: `T[]`	`void`	Emitted when the selection is changed.
`search:change`	value: `string \\| number \\| Date \\| null \\| undefined`	`void`	Emitted when the search value changes.
`headerClick`	item: `ITableColumns`	`void`	Emitted when a table header is clicked.
`itemClick`	item: `T`	`void`	Emitted when a table item is clicked.
`scroll:ptr`	-	`void`	Emitted when the table is scrolled to the pull-to-reload position.
`row:reorder`	args: `{ dragIndex: number; dropIndex: number; value: T[] }`	`void`	Emitted when a table row is reordered.
`select:all`	values: `boolean`	`void`	Emitted when the select all functionality is triggered.

Slots¶

To enhance the content of the vc-table component, use the slot system:

Name	Type	Description
`header`	`(props: any) => any`	Slot for header
`filters`	`(args: { closePanel: () => void }) => any`	Slot for filters
`mobile-item`	`(args: { item: T }) => any`	Slot for mobile item template
`header_${string}`	`(props: any) => any`	Dynamic column header slot
`item_${string}`	`(args: { item: T; cell: ITableColumns }) => any`	Dynamic column item slot
`notfound`	`(props: any) => any`	Slot for not found
`empty`	`(props: any) => any`	Slot for empty
`footer`	`(props: any) => any`	Slot for footer

Dynamic Views¶

To dynamically integrate the vc-table component into your views, use the schema interface:

interface TableSchema {
    id: string;
    component: "vc-table";
    property: string;
    multiselect?: boolean;
    header?: boolean;
    footer?: boolean;
    columns?: ITableColumns[];
    reorderableRows?: boolean;
    mobileTemplate?: {
        component: string;
    };
    notFoundTemplate?: {
        component: string;
    };
    emptyTemplate?: {
        component: string;
    };
    visibility?: {
        method: string;
    };
}

interface ITableColumns {
    id: string;
    width?: number | string;
    field?: string;
    alwaysVisible?: boolean;
    type?: "money" | "date-ago" | "date" | "time" | "date-time" | "image" | "status" | "status-icon" | "number" | "link";
    sortable?: boolean;
    class?: string;
    format?: string;
    align?: "start" | "end" | "center" | "between" | "around" | "evenly";
    title: string;
    sortable?: boolean;
    type?: string;
    customTemplate?: GridTemplateOverride;
    visible?:
        | boolean
        | { method: string; };
}

To incorporate the table into your dynamic applications, define the following properties:

Property	Description
`id` {string}	The unique Id for `vc-table` component.
`component` {string}	`vc-table`
`property` {string}	Property name that is used for binding table value to blade data. Supports deep nested properties like `property[1].myProperty`. Additionally, you have the flexibility to bind computed property that returns a value. Computed property should be defined in the blade `scope`.
`multiselect` {boolean}	Enable multiselect for the table.
`header` {boolean}	Enable table header. Default: `true`
`footer` {boolean}	Enable table footer. Default: `true`
`columns` {ITableColumns[]}	Array of table columns. Each column has properties like `id`, `title`, `sortable`, `alwaysVisible`, `type`, `customTemplate`, `visible`.
`reorderableRows` {boolean}	Enable reorderable rows. Default: `false`
`mobileTemplate` {{component: string}}	Mobile template for the table.
`notFoundTemplate` {{component: string}}	Not found template for the table.
`emptyTemplate` {{component: string}}	Empty template for the table.
`visibility` {{component: string}}	Visibility state for the table.