数据表格

了解如何在 Toolpad Studio 中使用数据表格。

演示

Toolpad Studio 构建于 MUI X Data Grid 之上，以增加更快的自定义和与内部工具的集成。

数据表格是内部应用程序中必不可少的组件。以下属性使其可以与其他 Toolpad Studio 组件、查询、数据提供程序协同工作。

“行”属性需要一个数据数组以显示在数据表格中。可以通过单击它并提供 JSON 或将其绑定到查询输出来配置它。以下视频演示了如何使用行链接将数据绑定到数据表格

“列”属性用于配置要显示的列。选择一个列，您将获得一个弹出窗口来配置其标题名称、宽度、对齐方式和数据类型。从 type 下拉菜单中，您还可以自定义列。

“Id 字段”属性用于标识哪个列包含 id 列。默认情况下，数据表格会在数据集中查找名为 id 的属性以获取该标识符。如果行的标识符不称为 id，则您需要使用此属性来告知数据表格它的位置。

此属性显示当前选定的行，如果未选择任何行，则显示 null。它可以绑定以对选定的行执行任何操作，例如从数据表格中删除行。

“加载中”属性用于告知用户数据正在准备中。它可以绑定到 React 查询属性，如 isFetching、isLoading。

接受三个选项：compact、standard 和 comfortable。以下显示前两个

此属性用于显示或隐藏数据表格的工具栏。以下数据表格与工具栏一起呈现，通过将 hideToolbar 设置为 true

当您使用 Toolpad pro 计划时，DataGrid 获得分组和聚合功能。您可以为单个列关闭此功能。

当您使用 Toolpad pro 计划时，网格列可以单独固定。您还可以使用列编辑器中的固定选项预先初始化带有固定列的网格

列固定选项

例如，一个表格，其中名称列固定在左侧，位置列固定在右侧，如下所示

请参阅以下文档，以获取 Toolpad Studio 中数据表格组件的所有可用属性的完整参考。