轻量客户表格

灵感：能力工具箱 gridjs（Grid.js 轻量客户表格）。

> 小四原创：客户行 → new Grid({ columns, data }).render(el)。
> 卸载清空容器；适合 Demo/小数据。

何时使用

• Demo 客户列表表格
• 需内置搜索的轻量表
• 不想上 Element Table 的简单页

硬约束

1. 依赖：gridjs（及 CSS）。
2. 小数据（建议千行内）；大数据走服务端分页。
3. 卸载销毁：清空挂载点或保留实例引用按文档 destroy（若版本提供）。
4. 实现要点注释标 小四原创。
5. 不做 Tabulator/Excel 全量替代。

推荐实现

import { Grid, html } from 'gridjs'
import 'gridjs/dist/theme/mermaid.css'

export type CustomerRow = { name: string; mobile: string; stage: string }

// 小四原创：客户轻量表格
export function mountCustomerGrid(
  el: HTMLElement,
  rows: CustomerRow[],
): { update: (rows: CustomerRow[]) => void; destroy: () => void } {
  const grid = new Grid({
    columns: ['客户', '手机', '阶段'],
    data: rows.map((r) => [r.name, r.mobile, r.stage]),
    search: true,
    sort: true,
    pagination: { enabled: true, limit: 10 },
  }).render(el)

  return {
    update: (next) => {
      grid.updateConfig({
        data: next.map((r) => [r.name, r.mobile, r.stage]),
      }).forceRender()
    },
    destroy: () => {
      el.innerHTML = ''
    },
  }
}

Agent 步骤

1. npm i gridjs；引入主题 CSS。
2. 客户 Demo 页挂载；数据变更 update。
3. onBeforeUnmount 调 destroy。
4. 自测：搜索可用；分页可见。

不要做

• 一次塞入十万行。
• 做成完整 BI 表格套件。

附加

• README.md · reference.md · templates/usage.md