AG Grid Theme #
If you need more flexible customization of the display of tables, we recommend using the AG Grid library. Vuestic UI provides a ready-made style theme for this library.
Also, we provide styles for HTML Table and have own data-table component:
AG Grid installation #
To start using AG Grid, install the dependencies in your project.
npm install @vuestic/ag-grid-themeThen import the stylesheet that defines the grid "structure" into the main.* file and apply the ag-theme-vuestic theme on the grid component.
<template>
<ag-grid-vue class='ag-theme-vuestic' ... />
</template>Depending on your project setup and or your purposes you can import pre-compiled CSS styles {'@'}vuestic/ag-grid-theme or {'@'}vuestic/ag-grid-theme/scss to use our SCSS mixins.
// main.*
import { createApp } from 'vue'
import App from './App.vue'
import '@vuestic/ag-grid-theme'
// OR
import '@vuestic/ag-grid-theme/scss'Vuestic-UI provides styles for AG-Grid Community and doesn't change any functional. For more examples and differences between Community and Enterprise versions visit the official AG-Grid documentation page.
Default usage #
To render a vuestic-style table correctly, you must provide the table dimensions (width and height), dataset (rowData) and column definitions ( columnDefs) according to this dataset.
Styles #
The theme supports the use of the classes ag-theme-vuestic--striped to highlight each even row of the table and ag-theme-vuestic--hoverable to highlight a line on hover.
Filters and sorting #
You can provide some options for the definition object to enable filtering and sorting.
Rows pinning #
To pin rows at the top or bottom, simply provide an array of rows for the pinnedTopRowData and pinnedBottomRowData properties.
Pagination #
You can enable pagination for the table by providing the required properties.
Cell editing #
Provide editable property to column definition and then double click or press Enter on selected cell to enable editing mode.