@appsbd/vue3-elite-grid

A highly customizable, responsive, and feature-rich table grid component for Vue 3.

vue3-elite-grid handles pagination, sorting, row grouping, column toggling, rendering responsive card styles on mobile, and offers easy CSS variable theming.

Installation

You can install the package via npm or yarn.

npm install @appsbd/vue3-elite-grid

Note: This package requires shvl and vue3-gettext as peer dependencies.

Basic Usage

Global Registration

In your main.js or main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import EliteGrid from '@appsbd/vue3-elite-grid';

// Import required CSS
import '@appsbd/vue3-elite-grid/dist/elite-grid.css';

const app = createApp(App);

// Register component globally
app.component('EliteGrid', EliteGrid);
app.mount('#app');

Component API

Common Props

| Prop Name | Type | Default | Description | |-----------|------|---------|-------------| | gridData | Object | { page: 1, total: 1, records: 0, limit: 10, rowdata: [] } | Data configuration object containing pagination details and the rowdata (array of row objects). | | columns | Array | [] | Array of column definition objects ({ name, title, title_align, width, is_sortable, tooltip, default_show }). | | isCardView | Boolean | false | When true, renders grid rows as cards. Defaults to true on small screens via internal responsive logic. | | limitList | Array | [10, 20, 50, 100, 200] | Provides dropdown options for rows-per-page. | | showHeader | Boolean | false | Visually toggles a specialized header slot area for custom controls. | | isRounded | Boolean | true | Apply rounded corners to the data container. | | isShowRowIndexColumn | Boolean | true | Show or hide the leading 1, 2, 3 row increment index column. | | isShowRowCheckbox | Boolean | false | Enable selecting entire rows using a checkbox column. | | showActionColumn | Boolean | false | Show the rightmost floating/inline Action column. | | actionTitle | String | 'Action' | Title to display for the action column. | | showLoader | Boolean | false | Mounts an internal loading overlay while data transitions. | | hidePagination | Boolean | false | Toggles the entire pagination panel at the bottom. | | isGroupSeparateHead | Boolean | false | Separates sub-headers in grouped data scenarios. |

Events

• @loadData(params): Fired when the grid requires new data to be fetched (e.g., page change, limit change, sorting). Passes a single params payload object containing page, limit, sort_prop, and sort_ord.
• @columnStatusChange(col): Fired when a user toggles the visibility of a column from within the inline Column Chooser dropdown feature.

Scoped Slots

Elite grid generates customizable column slots to alter the default layout of any specific data cell:

• header-{col.name}: Used to customize a specific table head title block. Example layout for column id would trigger via #header-id="{ col }".
• slot{col.name}: Custom renderer template for any row data cell. Receives context: { rowitem, index, col, val }. Example for column name triggers via #slotname="{ rowitem }".
• actionProperty: Inject buttons (edit, delete, etc.) inside the action column. Receives context { rowitem, index }.

General Slots

• slot-header: General grid header block.
• slot-loader: The loading overlay template.
• slot-no-record: Content to show when the rowdata payload is empty.

Theming & CSS Variables

@appsbd/vue3-elite-grid comes packed with a heavily variable-driven CSS engine designed for fast and complete brand integration. Supply these tokens inside your internal app.css acting on the :root pseudo-selector, or directly on the element invoking the widget.

:root {
  /* Typography */
  --eg-font-family: Inter, sans-serif, Arial;
  --eg-font-style: normal;
  --eg-font-weight: 500;
  --eg-font-size: 12px;

  /* App Backgrounds & Rows */
  --eg-bg: #fff;
  --eg-hover-bg: #fbfbfb;  
  --eg-loader-bg: rgba(0, 0, 0, 0.65);
  --eg-row-odd-color: inherit;
  --eg-row-even-color: inherit;
  
  /* Core Colors */
  --eg-primary-color: #3b82f6; 
  --eg-text-color: #374151;
  --eg-no-record-color: #cf0c0c;
  
  /* Table specific adjustments */
  --eg-cell-header-color: #f9fafc;
  --eg-row-group-title-color: #41444b;
  --eg-cell-index-color: #7f848d;
  --eg-header-tooltip: #9f641b;
  
  /* Borders and Padding */
  --eg-border-radius: 5px;
  --eg-table-border-color: #e2e8f0; 
  
  /* Pagination Components */
  --eg-pg-border-color: #ccc;
  --eg-pg-btn-bg: #3e44cc;
  --eg-pg-btn-color: #fff;
  --eg-pg-shodow-color: #ccc;
  --eg-pg-btn-action-size: 40px;
  --eg-pg-btn-size: 30px;

  /* Shadows */
  --eg-shodow-color: #3e3e3e;
  --eg-shodow-rule: 0px 3px 10px -7px var(--eg-shodow-color);
  
  /* Floating Popovers (Tooltips & Dropdowns) */
  --eg-dropdown-bg: #ffffff;
  --eg-tooltip-bg: #333333;
  --eg-tooltip-color: #ffffff;
  
  /* Card View Options */
  --eg-card-column: 3;
  --eg-card-column-radius: 5px;
  --eg-card-column-gap: 15px;
  --eg-card-container-margin: 15px;
}

Need Help?

If you have any questions or require custom support, contact us at [email protected]