Shifl Grid (Vue 3)

JSON-driven data grid for Shifl UI, built with Vue 3 + TypeScript. Library-first output via Vite (library mode) with Tailwind + CSS variables for theming.

Status

• ✅ Minimal grid (column visibility toggle, client-side sorting, global filter)
• 🚧 Everything else scaffolded/stubbed for incremental delivery (editing, virtual scroll, tours, views)

Requirements

• Node >=20.11.0 (matches Shifl UI constraint)
• Peer deps: vue@^3.4.0, pinia@^2.2.0

Install

npm install @shifl/grid
# peer deps
npm install vue pinia

Usage

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { ShiflGridPlugin } from "@shifl/grid";
import "@shifl/grid/style.css";

const app = createApp(App);
app.use(ShiflGridPlugin);
app.mount("#app");

<script setup lang="ts">
import { ShiflGrid } from "@shifl/grid";
import type { GridConfig } from "@shifl/grid";

const config: GridConfig = {
  name: "My Preferred Shipments",
  columns: [
    { key: "shifl_ref", label: "Shifl Ref #", sortable: true, frozen: true },
    { key: "company_name", label: "Customer", sortable: true },
  ],
  search: ["shifl_ref", "company_name"],
  sort: { key: "shifl_ref", order: "asc" },
  rows: [
    { shifl_ref: "SF-1001", company_name: "GMA Inc" },
    { shifl_ref: "SF-1002", company_name: "Walads Autowash" },
  ],
};
</script>

<template>
  <ShiflGrid :config="config" />
</template>

Scripts

• npm run dev — Vite dev server
• npm run build — Library build + d.ts via vite-plugin-dts
• npm run lint — ESLint (Vue + TS) flat config
• npm run test — Vitest (jsdom)
• npm run storybook — Storybook dev
• npm run storybook:build — Storybook static build

Project structure (high level)

• src/components/grid — ShiflGrid.vue (minimal implementation)
• src/composables — Core behaviors (sort/filter/columns implemented, others stubbed/TODO)
• src/types — Grid + theme contracts
• src/theme — CSS tokens
• src/styles — Tailwind entry + component styles
• src/utils — Helpers (config normalization)
• src/plugins — Vue install plugin
• stories/ — Storybook stories
• .storybook/ — Storybook configuration

Notes

• Config normalization supports both frozen and legacy fixed flags.
• Virtual scroll, editing, tours, saved/recommended views, telemetry are intentionally stubbed for later milestones.