@alaarab/ogrid-反应

反应钩和无头组件由OGrid UI两个包共用. 支持反应和反应DOM 17、18和19;取决于 ogrid-core 财务报告和审定财务报表 @tanstack/react-virtual。 。 。 .

npm install @alaarab/ogrid-react react react-dom

使用 @alaarab/ogrid-react-radix 或者说 @alaarab/ogrid-react-fluent 为现成的网格。 二者再出此API. 使用此软件包来制作自己的表格 :

import { useHeadlessGrid, type IColumnDef } from '@alaarab/ogrid-react';

interface Row { id: string; name: string }
const columns: IColumnDef<Row>[] = [
  { columnId: 'name', name: 'Name', sortable: true },
];

export function CustomTable({ data }: { data: Row[] }) {
  const grid = useHeadlessGrid({ columns, data, getRowId: (row) => row.id });
  return (
    <table>
      <thead>
        <tr>{grid.columns.map((column) => (
          <th key={column.columnId}>
            <button type="button" onClick={() => grid.toggleSort(column.columnId)}>
              {column.name} {grid.sortIndicator(column.columnId)}
            </button>
          </th>
        ))}</tr>
      </thead>
      <tbody>{grid.rows.map((row) => (
        <tr key={grid.getRowId(row)}>{grid.columns.map((column) => (
          <td key={column.columnId}>{String(grid.getCellValue(row, column.columnId) ?? '')}</td>
        ))}</tr>
      ))}</tbody>
    </table>
  );
}

useHeadlessGrid 管理排序/过滤/剪贴和基本行选择。 编曲 useInlineEdit, (中文(简体) ), useRangeSelection, (中文(简体) ), useFillHandle, (中文(简体) ), useCellClipboard, (中文(简体) ), useUndoRedo 财务报告和审定财务报表 useGridFocus 用于电子表格互动。 你把他们的事情线上, 并制造UI 无头向导 财务报告和审定财务报表 钩入引用。 。 。 .

组件层还共享合并,冻结/结构命令,查找/重置,注释,有条件的格式化,验证,公式协助和工具箱之间的拖动行为. 可选形式和行为有懒惰的条目;独立验证表导出于 @alaarab/ogrid-react/data-validation。 。 。 .

@alaarab/ogrid-react/testing 出口共享试验工厂。 此可选条目需要 @testing-library/react 16和回声18+.

麻省理工学院有执照.