@appsbd/vue3-elite-grid

This is plugin is for table grid
3,193
Install
npm install @appsbd/vue3-elite-grid
Latest Version:2.0.6
Vue:3
Last Updated:Apr 19, 2026
Links: npm
Maintainer: sarwarcse

@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/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;
  --eg-margin: 0px -7px;
  /* 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;
  --eg-cell-padding: 5px;
  /* 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;
  --eg-pg-margin-top: 10px;
  --eg-pg-margin-bottom: 10px;

  /* 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 hello@appsbd.com

Related Packages

@appsbd/vue3-appsbd-ui

Reusable Vue 3 component library

4,949
component-library vite vue vue3

Version History

Version Released Vue License
2.0.6 >=3.0.5
2.0.5 >=3.0.5
2.0.4 >=3.0.5
2.0.3 >=3.0.5
2.0.2 ^3.0.5