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:

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.

The va-data-table offers a simple yet powerful filtering feature. Users can filter the displayed data using an input field. This feature reacts to input changes, updating the table view to match the query.

Enable filtering by binding a Vue ref to the filter prop. Options like custom filtering functions and debounce input enhance the experience. Basic filtering allows users to search across all data, while custom functions provide more control over the filtering logic. Debounce input improves performance for large datasets.

Advanced filtering extends basic capabilities by allowing users to specify fields for filtering. This targeted approach enables more precise searches.

Implement this feature by combining a filter query text input with a multi-select dropdown to select fields. Users can focus their search on specific fields (e.g., 'Username', 'Email', 'Zipcode'), and custom filtering logic can be applied considering both the query and selected fields.

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.

You can also provide a custom display format function for a given column using the displayFormatFn field on the column definition object: displayFormatFn: () => 'Overridden string',The function takes in any value of any type and will allow full control over the displayed value.`

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.

By default, va-data-table utilizes client-side sorting. However, when using server-side sorting use the disableClientSideSorting prop to prevent dual re-ordering.

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.

You can freeze column width with width property in column. You can use it with virtual-scroller to prevent column size shifting on different data.