Base Grid

@mu-cabin/base-grid is a pure TypeScript editable data-grid library inspired by Base-style products. It focuses on field-driven columns, extensible cell rendering/editing, view state, and a Feishu-like grid interaction model without binding to any frontend framework.

Status: V1 implementation in progress. The current package includes the DOM renderer, built-in fields, editing, sorting/filtering, clipboard operations, attachment upload runtime, theming, overlays, class hooks, and lightweight plugins.

Goals

• Pure TS, class-based API: new BaseGrid(container, options).
• DOM virtual scrolling first, with fixed row heights and column virtualization.
• Chrome >= 108 support target.
• Field type plugin system for text, number, single select, multi select, date/time, and attachment fields.
• Feishu-like built-in field editing and column insertion for those six field types.
• Controlled-first row data model with strong events for custom business behavior.
• Optional Feishu-like view tabs and toolbar.
• JS theme config plus class hooks for styling.
• Loading, empty, error, and custom overlays.

Quick Example

import { BaseGrid } from '@mu-cabin/base-grid';
import '@mu-cabin/base-grid/styles.css';

const grid = new BaseGrid(document.querySelector('#app')!, {
  columns: [
    { id: 'title', title: '标题', type: 'text', field: 'title' },
    {
      id: 'priority',
      title: '优先级',
      type: 'singleSelect',
      field: 'priority',
      options: {
        choices: [
          { id: 'p0', label: 'P0', color: 'red' },
          { id: 'p1', label: 'P1', color: 'orange' },
          { id: 'p2', label: 'P2', color: 'gray' },
        ],
      },
    },
  ],
  rows: [
    { id: '1', title: '优化带飞本管理批量编辑 UI', priority: 'p2' },
  ],
  getRowId: row => row.id,
  toolbar: true,
  views: false,
  theme: {
    preset: 'larkLike',
    density: 'compact',
  },
  onCellCommit(event) {
    // Controlled mode: update your external rows and call grid.setRows(nextRows).
    console.log(event.rowId, event.columnId, event.newValue);
  },
  onAttachmentUploadRequest(event) {
    event.progress(event.files[0]!, 50);
    event.resolve(
      event.files.map((file, index) => {
        const attachment = {
          id: `upload-${index}`,
          name: file.name,
          size: file.size,
          url: `/uploads/${encodeURIComponent(file.name)}`,
        };
        return file.type ? { ...attachment, mimeType: file.type } : attachment;
      }),
    );
  },
});

grid.focus();

Project Docs

• Product Shape
• Architecture
• API
• Field Types
• View State
• Roadmap
• V1.1 Iteration Plan
• V1 Delivery Goal
• Repository Audit (2026-07-20)

Development

pnpm install
pnpm typecheck
pnpm test
pnpm build
pnpm dev

Frontend interaction and style validation should be done in Chrome through the Codex Chrome plugin.