简介
@shahar_d/griddle-react 是一个基于 React 的表格组件库，具有丰富的功能和可自定义性。
安装
使用 npm 安装：
npm install @shahar_d/griddle-react
使用
@shahar_d/griddle-react 的使用十分简单，只需要按照下面的步骤进行就可以了。
引入组件和样式
@shahar_d/griddle-react 由 griddle-react 和 griddle-react.css 两部分组成，因此需要分别引入。
import Griddle from '@shahar_d/griddle-react'; import '@shahar_d/griddle-react/dist/griddle-react.css';
准备数据源
@shahar_d/griddle-react 可以对任何一组数据进行渲染，只需要将数据传入组件的 data 属性中。
例如，假设我们有如下的数据：
-- -------------------- ---- -------
----- ---- - --
----- --------
---- ---
-------- ----------
------ --------------------
---
----- ------
---- ---
-------- -----------
------ ------------------
---
----- --------
---- ---
-------- ------------
------ --------------------
---
----- --------
---- ---
-------- -----------
------ --------------------
---则可以这样传入组件：
<Griddle data={data} />配置表格列和行为
@shahar_d/griddle-react 可以通过 columns 和 settings 属性控制表格的列和行为。
配置列
columns 属性是一个包含了每一列的配置信息的数组。每个配置对象包含以下属性：
id：列的唯一标识符，必须。title：列的标题，可选。cssClassName：列的 css 类名，可选。headerCssClassName：列头的 css 类名，可选。width：列的宽度，可选。cell：自定义单元格的渲染组件，可选。
例如，下面的配置将渲染出 4 列，分别是姓名、年龄、地址和邮件。
-- -------------------- ---- -------
----- ------- - --
--- -------
------ -----
---
--- ------
------ -----
---
--- ----------
------ -----
---
--- --------
------ -----
---将其传入 columns 属性中即可。
<Griddle data={data} columns={columns} />配置行为
settings 属性是一个包含了表格各种行为配置信息的对象。目前支持的属性有：
enableSort：是否允许排序，默认为false。sortAscendingComponent：升序排序的图标组件，可选。sortDescendingComponent：降序排序的图标组件，可选。useFixedHeader：是否启用固定表头，默认为false。useLoadMore：是否启用刷新加载更多数据，默认为false。usePagination：是否启用分页，默认为false。pageSize：每页显示的行数，可选。
例如，下面的配置将启用排序和分页：
const settings = {
enableSort: true,
usePagination: true,
pageSize: 2,
};将其传入 settings 属性中即可。
<Griddle data={data} columns={columns} settings={settings} />自定义单元格的渲染组件
@shahar_d/griddle-react 支持自定义单元格的渲染组件，只需要在 columns 属性中的 cell 属性传入一个组件即可。
例如，下面的代码将为第一列添加一个自定义的链接单元格渲染组件。
-- -------------------- ---- -------
------ - ---- - ---- -------------------
----- ------- - --
--- -------
------ -----
----- -- ----- -- -- ----- --------------------------------------
---
--- ------
------ -----
---
--- ----------
------ -----
---
--- --------
------ -----
---全局样式调整
@shahar_d/griddle-react 的样式都集中在 griddle-react.css 中，因此可以通过覆盖它的 CSS 规则来进行全局的样式调整。
例如，下面的 CSS 将更改表格的边框和背景色。
.griddle {
border: 1px solid #ccc;
background: #f5f5f5;
}示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- --------------------------
------ -------------------------------------------------
------ - ---- - ---- -------------------
----- ---- - --
----- --------
---- ---
-------- ----------
------ --------------------
---
----- ------
---- ---
-------- -----------
------ ------------------
---
----- --------
---- ---
-------- ------------
------ --------------------
---
----- --------
---- ---
-------- -----------
------ --------------------
---
----- ------- - --
--- -------
------ -----
----- -- ----- -- -- ----- --------------------------------------
---
--- ------
------ -----
---
--- ----------
------ -----
---
--- --------
------ -----
---
----- -------- - -
----------- -----
-------------- -----
--------- --
--
----- ------- - -- -- -
--------
-----------
-----------------
-------------------
--
--
------ ------- --------总结
@shahar_d/griddle-react 是一个功能丰富的表格组件库，可以满足各种需要。上面的教程介绍了它的基本使用方法和进阶技巧，希望可以帮助你更好地利用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d381e8991b448d2070