Boostgrid 2.5.2

Boostgrid

A modern, framework-agnostic data grid for Bootstrap 5. No jQuery, written in TypeScript, ships ESM + UMD.

• 🎯 Bootstrap 5 native — uses BS5 classes and CSS variables.
• ⚡ Fast — single delegated event listener, memoized derived view, indexed selection lookups, debounced search, virtual scrolling for 10k+ rows.
• 📦 Tiny — ~9 KB brotli core (15 KB hard ceiling); tree-shakeable formatters.
• 🧠 Type-safe — Boostgrid<TRow> is generic over your row shape. Formatters, callbacks, and footers all infer TRow end-to-end.
• 🧩 Framework-friendly — vanilla core + react-boostgrid and vue-boostgrid wrappers. Optional boostgrid-export plugin for CSV / Excel / Print.

Feature highlights

Host-page requirements

Boostgrid is a UI component, not a full bundle. The host page must also load Bootstrap 5's CSS and JavaScript bundle (the toolbar's page-size picker and column-visibility menu are Bootstrap dropdowns; without bootstrap.Dropdown they render but never open) plus an icon font matching the configured icons option — Bootstrap Icons by default, or Font Awesome when icons: fontAwesomeIcons is set.

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>


<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">


<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/boostgrid@2/dist/boostgrid.css">
<script src="https://cdn.jsdelivr.net/npm/boostgrid@2/dist/boostgrid.umd.js" defer></script>

Missing the Bootstrap JS bundle is a silent failure — dropdown buttons render but never open. Since 2.5.2, Boostgrid emits a console.warn at first toolbar mount when window.bootstrap.Dropdown is undefined.

Install

# npm
npm install boostgrid

# CDN — use .umd.js (the CDN serves .cjs with `application/node`,
#       which modern browsers refuse to execute as a <script>).
<script src="https://cdn.jsdelivr.net/npm/boostgrid@2/dist/boostgrid.umd.js"></script>
<link  href="https://cdn.jsdelivr.net/npm/boostgrid@2/dist/boostgrid.css" rel="stylesheet">

# NuGet
Install-Package Boostgrid

Don't forget the host-page requirements above — Bootstrap 5 JS and an icon font are both required.

Quick start

<table id="grid" class="table table-hover" data-toggle="boostgrid"
       data-selection="true" data-multi-select="true">
  <thead>
    <tr>
      <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
      <th data-column-id="sender" data-order="asc">Sender</th>
      <th data-column-id="received">Received</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>

import { attach } from "boostgrid";
import "boostgrid/style.css";

attach("#grid"); // or rely on data-toggle="boostgrid" auto-init

The full documentation, live examples, and API reference are at the showcase site (npm run dev).

Framework wrappers

Both wrappers use the same host-div pattern: the wrapper renders an empty <div>, and Boostgrid builds the <table> imperatively inside it. The framework's reconciler never fights the grid's DOM mutations. Both expose the same imperative handle (search, sort, reload, getSelectedRows, grid escape hatch).

React

import { ReactBoostgrid } from "react-boostgrid";
import "boostgrid/style.css";

export default function Inbox() {
  const [rows, setRows] = useState<Row[]>(initial);
  return (
    <ReactBoostgrid
      data={rows}
      columns={[
        { id: "id", text: "ID", identifier: true, type: "numeric" },
        { id: "sender", text: "Sender", order: "asc" },
        { id: "subject", text: "Subject" },
      ]}
      options={{ selection: true, stateSave: true }}
      onSelected={(rows) => console.log(rows)}
    />
  );
}

Vue 3

<script setup lang="ts">
import { ref } from "vue";
import { VueBoostgrid } from "vue-boostgrid";
import "boostgrid/style.css";

const data = ref([{ id: 1, sender: "alpha@x.com", subject: "Welcome" }]);
const cols = [
  { id: "id", text: "ID", identifier: true, type: "numeric" },
  { id: "sender", text: "Sender", order: "asc" },
  { id: "subject", text: "Subject" },
];
</script>

<template>
  <VueBoostgrid :data="data" :columns="cols"
    :options="{ stateSave: true, selection: true }"
    @selected="(rs) => console.log(rs)" />
</template>

Export plugin

CSV, Excel, and Print export ship as a separate workspace package so the core stays tiny. Excel uses the optional peer dependency xlsx-js-style via a runtime dynamic import — install it only if you need .xlsx output.

import { attach } from "boostgrid";
import { attachExport } from "boostgrid-export";

const [grid] = attach("#grid");
const exporter = attachExport(grid, { filename: "messages", include: "filtered" });

exporter.csv();
await exporter.xlsx();   // requires xlsx-js-style
exporter.print();

attachExport also adds a delegated click listener for declarative buttons:

<button data-bg-export="csv">Export CSV</button>
<button data-bg-export="xlsx">Export Excel</button>
<button data-bg-export="print">Print</button>

Development

npm install
npm run dev          # Vite dev server with the docs site
npm test             # Vitest, core (49 specs)
npm run test:all     # core + react + export + vue (62 specs)
npm run build        # ESM + UMD + d.ts + css to dist/
npm run build:all    # core + all three workspace packages
npm run size         # bundle-size guard (size-limit, 15 KB ceiling)

Workspace topology

boostgrid/                       — core (this package)
├── packages/
│   ├── react-boostgrid/         — React 18+ wrapper
│   ├── vue-boostgrid/           — Vue 3 wrapper
│   └── boostgrid-export/        — CSV / Excel / Print plugin
├── docs/                        — showcase site (deployed to GitHub Pages)
└── dist/                        — build output (gitignored)

License

MIT — Copyright © Jeffery Leo.