@ bmsuisse/ 数据网

无头核反应数据网 TanStack 表格 v9 数据, (中文(简体) ), 共用过滤器/分包合同 bmsdna-datagrid Python package)和"阴影"(Shadcn)/"基于"(ui)的原始人. 包括 <DataGrid>, (中文(简体) ), <TreeDataGrid> (懒惰的树网), <ColumnSelector>线条 虚拟化、无限滚动和列级过滤部件 (单位:千美元)NumberComparisonFilter, (中文(简体) ), NumberHistogramFilter, 铝过滤器, 以及更多).

安装

npm install @bmsuisse/datagrid

同伴依赖性 : react 财务报告和审定财务报表 react-dom (单位:千美元)^18 或者说 ^19) (中文(简体) ).

使用量

import { DataGrid, type ColumnDef } from "@bmsuisse/datagrid";

const columns: ColumnDef<Row>[] = [
  { id: "name", type: "string", header: "Name", accessorKey: "name" },
];

<DataGrid columns={columns} dataSource={{ mode: "client", data: rows }} />;

翻译过滤器 UI

带有英国字符串的过滤部件 。 过 filterLabels 联合国 Partial<FilterLabels>; 任何省略的内容都使其默认值从 defaultFilterLabels翻译它们:

import { de } from "date-fns/locale";

<DataGrid
  columns={columns}
  dataSource={{ mode: "client", data: rows }}
  filterLabels={{
    selectAll: "Alle auswählen",
    searchPlaceholder: (header) => `${header} suchen…`,
    filterAriaLabel: (header) => `${header} filtern`,
    dateLocale: de,
  }}
/>;

外置部件 <DataGrid> 从 a 读取相同的标签 <FilterLabelsProvider labels={…}>,或采取每只小鼠 labels 道具 (英语).

见 一般事务人员(其他职等) 说明设计的全部理由,以及 packages/datagrid/demo 对 SQL 和 a 可操作的例子 Meilisearch 后端 .

许可证

麻省理工学院