# Table

The table is a flexible component which allows to display any information in tabular form. It consists of title, description and data table.

# Usage

Use the columns prop to setup your table. Each column should be an object with the following interface. If no text is provided, the table will use the field value in title case.

Use the data prop to pass in an array of objects to your table's datagrid. The keys for each of your data objects must correspond to the field's in your columns otherwise data will not be displayed.

You can use the title prop or slot to give your table an optional title.

# Column width

Use the width property of column prop to pass in an custom width to your table's column. This property accepts string values, that are valid CSS width values. If not set columns will have auto width.

# Cell Alignment

Table columns can be aligned left, center or right. Use align prop to set column alignment. Default column alignment is left.

# Variants

Use the variant prop to change the appearance of your table. Use the headless variant when you don't need the thead of your table.

# Loading

Use the loading prop to show loading table animation. Loading table will have same column count as passed columns array and row count that match default count of rows per page.

# Clickable Rows

Use event listener row:click to make rows clickable. Clicking on row will fire an event with row's index and data as payload.

Note: All nested clickable elements should have @click.stop modifier to avoid triggering row click events.

# Sorting

The Table component handles basic alphabetical or numerical sorting and also allow a custom comparator function to be passed in for more complex data. Add sortable: false to disable sorting for specific column. Specify order parameter for custom comparator and make sure your algorithm handles asc and desc order. Set the initial sort field and sort order by setting the sortOrder property to asc or desc on the desired column. If added to multiple columns, the first column found will be the only one used for sorting.

# Pagination

Table pagination is shown when total table row count is greater than rows per page setting. Total row count is passed via rows prop, but in case if rows prop is less than data.length then greater value is used.

# Pagination - Page

Use the page prop to set initial page of table. By default page is set to 1.

# Pagination - Page Size

Use the page-size prop to set initial page size of table. By default page is set to 10 rows per page. Prop accepts one of [10, 20, 50, 100] options.

# Pagination - setPage

The setPage(pageNumber) function can be used to set current page.

# Server side

Server side prop is used to determine if table has dynamic data, when this prop is set to true, then all sorting and data manipulation is done on server side and table just uses provided data.

# Checkable Rows

Provide checked-rows prop to make all rows checkable. It will add column with checkboxes before other defined columns.

Use event listener check:row and unchecked:row to track currently checked rows. Default events for header checkbox are check:visible, check:all and check:none. Each event has default row check handler, which can be customized by providing event listeners.

Rows are identified by id field by default. Provide rowId to override identifier field for data array

checked-rows.sync property can be used to not implement row-check event handlers

# Checkable Rows - Checked Text

Provide checked-row-text prop to define a string, that shows how many rows are checked. The string must contain $$, which will be replaced by the number of checked rows.

Provide check-actions prop to define actions for header checkbox. Each action will emit check:<action> event on click.

# Slots

The Table component uses dynamic scoped slots to render the table header cells and the table data cells. You can use these to add components or other elements besides text to your table headers and cells. Here, we add links, tags and icons to our table.

Slot	Description
title	renders at the top of the table
description	renders between the table title and the data grid
controls-left	renders above the table on the left after the search input, if present
actions	renders above the table on the right after bulk actions (if present) and before the columns button (if present)
header-{field-name}	`header-` plus the corresponding `columns` field in kebab-case
cell-{field-name}	`cell-` plus the corresponding `columns` field in kebab-case

# Filtering

Filters should be added via the actions slot. Then, filter your data by the filter values. You will need to use server-side to get your table's data to be reactive.

# Searching

The table component can be searched if the boolean property searchable is present. The search input's events can be responded to by attaching to @search:input. Search function defaults to simple string search for the current data set.

# Searching with debounce

The search result events can be debounced by any milliseconds if debounceSearch is passed with number. By default debounceSearch is set to 0.

# Searching with delayed result and custom search function

Sometimes the query has to come from an API, in which case the search result may not return immediately. Show the loading indicator in the search input in place of the magnifying glass icon to communicate the delay to the user by altering the search-loading between true and false as needed. This example is only to simulate the API scenario, hence the setTimeout in searchInput. This also shows how to supply a custom search function for local data.

# Column settings

Property column-settings controls a popover button. User can toggle visibility here, but it will disable the last visible column. Provide false value to this prop to hide column settings. Provide any string value to change button's text.

# Column Settings Text

# Hide Column Settings

# Pinned Columns

User can pin and unpin columns using Column Settings. Scroll won't affect these columns. User can't pin all columns.

# Pinned Columns & Checkbox

# Bulk Actions

Use bulk-actions prop to provide a set of actions for checked rows.

# Single Action

If bulk-actions contains only one item, component will display a button for that action.

# Multiple Actions

If bulk-actions contains multiple items, Ci-Select will be used to display and select actions.

# No Results Text

The table component can have no results in table and when that happens no results text is displayed. Use noResultsText prop to change no result text. By default noResultsText is No results found.

# Disabled rows

Rows can be disabled by adding disabled: true to the row's data. Disabled rows appear faded out and cannot be checked or clicked.

# Events

Event	Arguments	Description
`@search:input`	Input value	Keystroke. Emited when server side prop is turned off
`@columns:update`	The column items[Deprecated]	The updated array of column items
`@column:update`	Updated column item	Emits updated column object
`@update`	Object { skip: Number, take: 10/20/50/100, sortField: field, sortOrder: asc/desc, searchText: string }	Emitted when data is server side managed and needs to be updated

# Column Interface

Property	Type	Description	Required
field	`string`	A unique id for this column	`true`
text	`string`	Text to render in this column	`false`
width	`string`	The width of the column, as a valid css value	`false`
align	`left`, `center` or `right`	Sets column alignment. Default column alignment is left.	`false`
sortable	`boolean`	Whether the column is sortble	`false`
comparator	`Function`	The function to use for sorting. By default this will use alphabetical or numerical sorting based on the table contents	`false`
hidden	`boolean`	Whether the column has been hidden or not	`false`
hidable	`boolean`	Whehter the column can be hidden or not	`false`
pinned	`boolean`	Whether the column is pinned or not	`false`

← Sub Menu Tabs →