Data table

#

The va-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, row selection, ability to add additional row(s) to table header (thead), body (tbody) or footer (tfoot) and other functions.

Also, we provide styles for HTML Table and have own theme for AG-Grid:

The standard va-data-table will by default render your data as simple rows.

Slots allow you to control the display of data and their views in different parts of the table. The examples below demonstrate some of these slots and what you can do with each of them.

Using custom slots. Custom slots (username, street) display certain data.

Showing header, body and footer's prepend and append static rows. For added (prepended and appended) static rows an additional className with a background color is set.

Using colgroup slot to set specific attributes to columns. For last column an additional className with a background color is set.

va-data-table allows to apply a single filter for the entire table with the filter prop. To use a custom filtering function provide the va-data-table with the filter-method prop.

The following example shows the use of a custom filtering function (which looks for the exact match rather than the standard one which checks for substring-inclusion) when the respective checkbox is checked.

You can specify which columns should be sortable by providing a column definition object (see the columns prop below) with the sortable: true field. Making a column sortable means allowing to click the column's header to toggle the sorting by that column's values.

You can use the sortingOptions property to set the sort order for the table as a whole, as well as for each column individually in the columns object.

You can also provide a custom sorting function for a given column using the sortingFn field on the column definition object: sortingFn: (a: any, b: any) => number. The function takes two cells' initial values (a, b) (note: initial values (i.e. in the form the user provided them, rather than stringified)) and must return a number (-1, 0, +1) indicating whether the two rows should be swapped the places or not. See the standard JS's Array.prototype.sort for details. If you want to runtime-disable the custom function and start making use of the built-in one, pass the undefined to the sortingFn.

va-data-table also optionally accepts the sort-by and the sorting-order modeled props, which allow users to change sorting settings from-outside and to model the changes introduced to the table's sorting by interacting with the table itself. They also allow to provide initial sorting values. Properties work through the v-model.

Use the selectable prop to indicate whether the va-data-table should have selectable rows or not. The highlighting color of the selected row might be changed with the selected-color prop.

The selection may optionally be attached to a model with the standard v-model (using the :model-value prop and the update:modelValue event). This also allows to set the initial selection on the va-data-table.

If you have items that can be updated (from the backend, for example), you must set the items-track-by prop to track your selected items properly.

Use the per-page and current-page props to enable pagination.

The va-data-table component is paginator-agnostic. I.e. it can work with any pagination component you'd like. In the example below, it uses both standard inputs and the va-pagination component.

Should be specified on columns (see the columns prop below). Allows to provide different values (text-align, vertical-align and width css properties, custom class and style) for headers and for columns' cells.

Row and cell customization can be achieved by binding attributes for items using row-bind and cell-bind.

The virtual-scroller prop enables virtual scroll for tbody rows (read more). Pay your attention, that CSS transition is disabled here because of possible performance problems.

The sticky header and footer are set by the sticky-header and sticky-footer properties. Sticky behavior is achieved through CSS with position: sticky. This is NOT supported on all browsers. Check caniuse.com before using this technique.

To work correctly, it is important to limit the height (set the value in the height property of the component or using the CSS height or max-height properties) of the table and assign a background color (set the CSS value background-color) of the table header.

The component has many different properties, some of them are shown below with an example.

Example of va-data-table with CRUD actions using a va-modal component for editing each row:

Each row could can be additionally expanded by providing expandableRow slot. Slot expansion is triggered by row.toggleRowDetails slot property

Inline cell editing example. We provide a #cell slot for each column. The VaValue component provides a boolean variable, which we can use to show/hide input. To change cell data we need access it by reference using row.rowData[item.key] - this way vue can track reactivity. Additional CSS is used to make the table look better. This way you can use VaInput, VaSelect or any other component to edit data inline.