@azrico / reactgrid

用于Azrideus项目的私有React数据网格包。

使用

import { AzGrid } from '@azrico/reactgrid';
import '@azrico/reactgrid/dist/src/themes/azgrid-theme.css'; // optional colours

const columns = [{ name: 'name', header: 'Name', defaultFlex: 1 }];
const rows = [{ __table_id: '1', name: 'Alice' }];

<AzGrid theme="light" columns={columns} dataSource={rows} />;

组件导入 grid.css （布局和结构，没有颜色）本身。 azgrid-theme.css 是可选的 令牌预设：它绘制的每一个元素 --azgrid-* 下面的变量具有内置的明暗回调。 如果没有它，网格呈现为未涂漆的，并继承页面的颜色，因此您可以根据样式表发布自己的样式表 稳定的 azgrid__* 类名代替。

同行依赖性: react， @tanstack/react-table (>= 8.20 @tanstack/react-virtual (> = 3.10)。 从1.x升级？读 MIGRATION-2.0.md： gridOptions 消失了，每个选项都是顶级道具。

道具

每一个 x / defaultX / onXChange 三人工作控制（传球） x)或不受控制（传球） defaultX）。

数据

列

排序和过滤

内置操作符：string contains， eq， neq， startsWith， endsWith;数量 eq， neq， gt， gte， lt， lte， inrange;选择 eq， inlist;保龄球 eq.

行

行重新排序

与 onRowReorder 用户可以用鼠标将一行拖动到新的位置，或者用鼠标移动活动行 Alt+箭头向上/ Alt+箭头向下。网格不会改变它的数据： rows 是否有加载的顶级行的新数组 它们的新顺序（相同的行对象），将其作为 dataSource. data 是移动的行， fromIndex 和 toIndex 它在移动前后加载行的索引。

const [rows, setRows] = React.useState(initialRows);
<AzGrid columns={columns} dataSource={rows} onRowReorder={({ rows }) => setRows(rows)} />;

在对行进行排序（显示的顺序不是数据顺序）时关闭重新排序 allowChildRows 和 pagination: 'remote'。不能拖动具有打开单元格编辑器的行。拖放使用原生HTML5拖放， 所以它可以在鼠标上工作，而不是在触摸屏上。被拖拽的一行落在比它低一行的后面，比它高一行的前面。 拖动时，行得到 azgrid__row--dragging 指针下的那一行 azgrid__row--drop-after 或者 --drop-before，画成一条线 --azgrid-accent.

以适应 n 没有滚动条的行，给出网格 get_grid_height(n, rowHeight, headerHeight) Px的高度： headerHeight + 1 + n * rowHeight + 2 （头部的1px底部边框和网格的1px顶部和底部边框的默认主题）。在显示时添加筛选器行、页脚和分页栏。

树和细节

选择

编辑

键盘和事件

Misc

列定义

网格的API

gridRef.current 公开:

DOM类

网格呈现稳定的BEM类名。自由设置样式或查询它们。它们被输出为 AZGRID_CLASSES.

头菜单项获得命名条目的修饰符： --sort-asc， --sort-desc， --unsort， --columns (子菜单 触发), --column (子菜单中的显示/隐藏复选框，也带有 data-column), --custom （columnMenuItems）。 州修饰符: --active (当前排序，或 isActive （自定义项）， --checked （可见栏）和 --open （显示子菜单时触发子菜单）。

行得到 --odd/--even， --selected， --active， --expanded 和 --editing 修饰符, --dragging， --drop-before/--drop-after 在行重新排序期间。细胞变得 --selected， --active， --editing， --readonly， --pinned-left/--pinned-right 和 --pinned-edge 修饰符。标题单元格得到 --sortable， --sorted-asc/--sorted-desc 和 --resizing 修饰符。

保存的列宽度

集 gridId 为了保持列的宽度，用户可以在重新加载时调整大小。宽度保存在 localStorage 并按名称匹配到列。

import { AzGrid, setGridStorageScope, clearColumnSizes } from '@azrico/reactgrid';

setGridStorageScope(user.id); // once, before the grids render, so users of one browser don't share widths

<AzGrid gridId="current-stock" columns={columns} dataSource={rows} />;

clearColumnSizes('current-stock'); // reset, takes effect when the grid remounts

一列的 width 被用作 defaultWidth 当 gridId 设置，因此可以调整其大小。

可访问性

网格公开ARIA网格语义，因此屏幕阅读器和自动化工具可以从可访问性树中读取它。

新道具:

• ariaLabel?: string 在网格上设置网格的可访问名称。
• ariaLabel?: (value, data) => string 在列集上 aria-label 在细胞上。使用它的图标，徽章或值的可见文本不是描述性的。

const columns = [{ name: 'status', header: 'Status', ariaLabel: (value) => `Status: ${value}` }];

<AzGrid ariaLabel="Orders" columns={columns} dataSource={rows} />;

用列的属性覆盖任何单元格属性 cellDOMProps / headerDOMProps． 您在那里设置的值将被保留。 一个 onRenderRow Prop在设置网格自身的行属性后运行，因此它也可以更改它们。

主题

使用 theme="light" (默认), theme="dark"，或自定义名称。网格包装器得到 azgrid-scope 和 azgrid-theme-<name>;传送的列和上下文菜单(.azgrid-column-menu， .azgrid-context-menu)得到 相同的主题类，所以它们读取相同的变量。自定义名称对未指定的变量使用少量回退。

dark 仍然是一个弃用的别名。 theme 优先。

集 --azgrid-* 包装器上的变量， :root，或者主题课。每个网格可以使用不同的调色板。主人 变量总是占上风：主题文件只声明 --azgrid-preset-* 后备方案，永远不要公开默认。

<div className="my-grid">
  <AzGrid theme="light" columns={columns} dataSource={rows} />
</div>

.my-grid {
  --azgrid-accent: #345b93;
  --azgrid-header-bg: #edf2f8;
  --azgrid-row-bg-hover: #e4ecf7;
}

行状态是按这个顺序绘制的（后期获胜）：斑马奇数/偶数，树行，活动，悬停（同时行） 上下文菜单打开)，选中。固定单元格复制行当前背景，以便在滚动时保持不透明。

检查样式表 node config/check-theme.cjs;重新生成预设块和下面的表格 node config/generate-theme.cjs 编辑该文件中的令牌清单后。

CSS变量

所有变量都有浅/暗回退。为指定的属性使用有效的CSS值。 --azgrid-locked-column-shadow 接受完整的 box-shadow 价值。 --azgrid-header-height 不就是一个记号吗 网格将其设置在测量标题的根上，以便过滤器行可以粘贴在其下面。

例子

看到 src / example.tsx 对于明、暗有一个完整的习惯 deco 调色板。

自定义渲染器必须为自己的内容设置样式。需要外部菜单门户容器 azgrid-scope、匹配 azgrid-theme-<name> 类和主机变量。