@devslab/ dds- table- react
DDS 样式和SSR安全反应边界 AG 网状社区 36.2.0此软件包独立于 @devslab/dds-react; 导入 React 原始文本不导入 AG Grid 。 反应和反应DOM 18.3或19是同龄人.
import { useRef } from "react";
import { DataTable, type DataTableRef } from "@devslab/dds-table-react";
import type { ColDef, ICellRendererParams } from "ag-grid-community";
import "@devslab/dds-tokens/tokens.css";
import "@devslab/dds-css/dds.css";
import "@devslab/dds-table-react/styles.css";
type Order = { id: string; amount: number };
const columns: ColDef<Order>[] = [
{ field: "id", filter: true },
{ field: "amount", editable: true,
cellRenderer: ({ value }: ICellRendererParams<Order, number>) => <strong>{value}</strong> },
];
export function Orders({ rows }: { rows: readonly Order[] }) {
const gridRef = useRef<DataTableRef<Order>>(null);
return <DataTable rows={rows} columns={columns} label="Orders"
placeholder="Preparing orders" gridRef={gridRef}
gridProps={{ getRowId: ({ data }) => data.id, rowSelection: { mode: "multiRow" },
onGridReady: ({ api }) => console.log(api.getDisplayedRowCount()),
localeText: { noRowsToShow: "No orders" } }} />;
}
rows 接受不可变的数组引用并复制AG Grid的数组。 当数据变化时替换数组;当实用时保持列和本地配置的稳定. columns 属于本地 ColDef<T>[],包括反应细胞渲染器. label 需要并标出附件区域和挂起的网格。 所有拷贝和翻译都属于打电话者;通过 localeText 为AG Grid的内置UI.
gridProps 是导出 DataTableGridProps<T> 土生土长的别名 AgGridReactProps<T>,不包括 rowData 财务报告和审定财务报表 columnDefs。它接受AG调用、编辑/选择/过滤选项、自定义渲染器、, gridOptions, (中文(简体) ), modules,主题。 DDS 默认为本地 AllCommunityModule可排序/可调整列 minWidth: 120,以及 ddsGridTheme. 直接原生地产凌驾于等同物之上 gridOptions 数值。 自定义模块集必须包括其特性所需的模块和 RenderApiModule 用于所需的可访问标签。 DDS不在全球注册模块,也不在本地选项之外添加选择/过滤/编辑.
gridRef 是一个正常的 React ref to AgGridReact<T>; 访问 gridRef.current.api 之后 onGridReady。它支持对象 refs和回调 refs,包括React 19 ref 清理。 组件 ref 指其附件 HTMLDivElementDOM道具(id, (中文(简体) ), className, (中文(简体) ), style)适用于该地区.
density 默认为 "comfortable" (40px行,44px头; "dense" 使用32px行和36px头. 当地人 rowHeight编号 :headerHeight 覆盖密度 。 默认高度为 480px; 使用 style={{ height: 640 }} 来改变它。 网格可以填充可用的宽度并保留最小的列宽,使用AG Grid在窄屏幕上的水平滚动. 选择本地 domLayout 如果改变其布局,则将容器尺寸合并起来.
导出 ddsGridTheme 将语义DDS CSS变量映射到AG Grid支持的主题参数. 它遵循最近的 DDS 符号范围,包括 [data-theme="dark"]覆盖 gridProps.theme, (中文(简体) ), gridProps.gridOptions.theme,或 ddsGridTheme.withParams(...). AG Grid 生成自己的主题 CSS; 不在此默认主题的同时加载遗留的 AG Grid CSS . AG 网格主题参数 支持 CSS 变量颜色表达式.
安全部门改革和工人进口是浏览器-全球安全。 服务器渲染和第一次水合渲染会发出同样的名称 role="region" 占位符为 aria-busy="true",稳定高地,可选择的呼叫者提供 placeholder然后挂起 AG 网格。 服务器标记中未包含已实现的网格行或 HTML 表格;如果页面需要,则提供单独的服务器摘要 。 土著 loading 标记挂载区域繁忙,并驱动 AG Grid 的加载覆盖。 空阵列使用 AG Grid 的本地空状态 。 在 React 服务器组件框架中,在客户端组件内使用此组件.
社区排序,过滤,再大小调整,编辑,选择,虚拟化,无限行模式仍然是AG Grid行为. 默认客户端行模型只处理所提供行: 当它无法排序/过滤整个远程结果时 rows 是一个已装入的页面。 对于远程数据,选择具有数据源的共同体无限行模型,并在其中执行远程排序/过滤 getRows 处理者。 过 rows={[]} 并配置本地数据源; rows编号 :columns 仍然是DS自有的投入。 Entertainment服务器侧行模式,分组,支点,以及其他商业功能不捆绑. 单独安装/注册企业模块的消费者拥有许可证和集成. AG 网格行模型 文档这些边界.
公布的无害环境管理、申报和明确的CSS出口并不包含固体运行时间依赖。 DDS的源代码许可在 自由主义AG Grid社区有自己的麻省理工学院执照.