@alaarab/ogrid-react-radex (英语)

OGrid的Radix UI工具包. 支持React和ReactDOM 17,18和19,并再出口React钩和核心类型/用途.

npm install @alaarab/ogrid-react-radix react react-dom @radix-ui/react-checkbox @radix-ui/react-popover

import { useState } from 'react';
import { OGrid, type IColumnDef } from '@alaarab/ogrid-react-radix';

interface Row { id: string; name: string }

const columns: IColumnDef<Row>[] = [
  { columnId: 'name', name: 'Name', sortable: true, editable: true,
    filterable: { type: 'text' } },
];

export function Example() {
  const [rows, setRows] = useState<Row[]>([{ id: '1', name: 'Alex' }]);
  return (
    <div style={{ height: 400 }}>
      <OGrid<Row>
        data={rows} columns={columns} getRowId={(row) => row.id}
        editable cellSelection cellReferences findReplace statusBar
        onCellValueChanged={({ item, columnId, newValue }) => {
          setRows((data) => data.map((row) =>
            row.id === item.id ? { ...row, [columnId]: newValue } : row));
        }}
      />
    </div>
  );
}

包括多级排序,数字/条件过滤器,Excel选择/键盘行为,填充序列,剪贴板和撤销. 选择合并、冻结、结构编辑、隐藏、工作表调制回调、查找/替换、有条件的格式、注释、包装/行高、公式/溢出、验证和拖放通过共享 道具。 。 。 .

进口网格/人口覆盖CSS; @alaarab/ogrid-react-radix/index.css 亦可明确提供(styles/index.css 是一个别名)。 可选对话框装入自己的样式 。 阴影令牌,导入 @alaarab/ogrid-react-radix/styles/preset-shadcn.css; 见 主题。 。 。 .

这个 node 导出为节点加载器提供 CSS 免费条目; 捆绑器使用样式 module 输入。 热点消费者需要无害环境管理改造和CSS支架。 见 安装 编辑 无头向导。 。 。 .

麻省理工学院有执照.