在前端开发中，我们经常需要使用到表格来展示数据，然而如何优雅地展示列表数据，以及如何让用户交互更加友好呢？在这里，我们介绍一款 npm 包 mui-datatables-with-subcomponent 可以优雅地解决这个难题。
1. 什么是 mui-datatables-with-subcomponent
mui-datatables-with-subcomponent是一个mui-datatables的扩展，能够支持更多功能：增强型表头，展开详情，列表嵌套，样式自定义等。
2. 安装
使用 npm 进行安装：
npm install mui-datatables-with-subcomponent
或通过 yarn 安装：
yarn add mui-datatables-with-subcomponent
3. 快速上手
为了快速了解该库的基础用法，我们可以先直接使用它的一些默认配置：
import { MuiDataTableWithSubComponent } from "mui-datatables-with-subcomponent";
<MuiDataTableWithSubComponent
data={[["a", "b", "c"], ["d", "e", "f"]]}
columns={["Column 1", "Column 2", "Column 3"]}
/>这样，该库就会默认生成一个带有表头的表格，并且把我们提供的 data 数据填充到表格中，同时 columns 也被解析到表格中。
4. 增强型表头
表头是表格中不可或缺的部分，尤其是在数据复杂，分类明细增多的时候，增强型表头的作用尤为显著。
我们可以直接在 columns 数组中定义表头，并且可以对表头进行分类：
-- -------------------- ---- -------
------ - ---------------------------- - ---- -----------------------------------
----- ------- - -
-
----- -------
-------- -
-------------- ------
------- -----
----------------- -- ------ --------- -- -- -
------ --- ------------------------- -----------
-
-
--
-
----- ----------
-------- -
------- -----
----- ------
----------------- -- ------ --------- -- -- -
------ --- ------------------------- ----------
-
-
--
-
----- -------
-------- -
------- -----
----- ------
----------------- -- ------ --------- -- -- -
------ --- ------------------------- -----------
-
-
-
--
----- ---- - ------ ------- ----- ------ ----------- ------ ------- ----- ------ -------------
-----------------------------
------------ -------- ------
-----------
-----------------
--其中，我们通过 customHeadRender 方法对表头进行了自定义的渲染。最后的渲染效果如下图所示：
5. 表格嵌套和子组件
当数据增多，需要一定的分类展示时，表格可通过嵌套实现，比如，将某些数据作为子行展示，或者在单元格中展示嵌套的包含更多信息的元素。
表格的嵌套往往是通过子组件进行实现的，子组件可以是其他组件或者 React 元素。
-- -------------------- ---- -------
------ ---- ---- -------------------------
------ ------ ---- ---------------------------
------ ------ ---- ---------------------------
------ -------- ---- -----------------------------
------ ------- ---- ----------------------------
------ ---------- ---- -------------------------------
------ ---------- ---- ----------------------------
----- ------- - -
-
----- -------
-------- -
------- -----
----------------- ------- ---------- -- -
----- -------- - ---------------------
------ -
----------------
--------
----------- --
---------
---- -------- -------- --------------- ----------- -- ---
----------- ------------------------------------------
----------- ----------------------- --------------------------
------
-----------------
--
-
-
--
-
----- --------
-------- -
------- ----
-
--
-
----- -----------
-------- -
------- -----
----------------- ----- -- -
------ -
----- ------------- --------------------------- --
--
-
-
-
--
----- ---- - -
----- --------- ----------- ---- ------ ---
-------- -------- ------------ ---- ----------- ---
------- -------- ----------- -------- ---
--------- ---------- ------------ --------- --
--
----- ------------- - -
-
----- ---
-------- -
------ -----
----------------- ------- ---------- ------------ -- -
------ -
-------
----------- -- -
----------------- - ----- - ------
--
-
------ - ------ - ------- -------
---------
--
-
-
--
----------
--
----- ---------- - -
---- ------------
-
---
--------- ------- --- -- ----- ----- --- -----
-- ------ ---- --- -- --- ------
----- -- --- ----
----------------
--------- --------- -------------- --------------
-------- --
---- -------- -------- -- ---
----------- --------------------- -------- ------------- - -----------------------
----------- ---------------------- -- --- ------- ------ --- --------------------
------
-----------
-----------------
-
--
----- ------- - -
------- ----
--
-----------------------------
------------ -------- ------
-----------------
-----------------------
-----------------
--带有嵌套和子组件的表格渲染效果如下图所示:
6. 样式自定义
与其他 Material-UI 组件一样，Mui-datatables-with-subcomponent 也可以自定义样式，包括字体、背景颜色、主题色等。可以通过在参数中传入 MUIDataTableOptions 对象， 并通过其属性更改默认样式：
-- -------------------- ---- -------
------ - --------------- ---------------- - ---- ---------------------------
------ - ---------------------------- - ---- -----------------------------------
----- ----- - ----------------
-------- -
-------- -
------ ----------
----- ----------
----- ----------
------------- ------
-
-
---
----- ------- - -------- ---------- --------
----- ---- - ------ ------- ----- ------ ----------- ------ ------- ----- ------ -------------
----- ------- - -
----------- -----------
----------- ---------
--------------- -----
--
----------------- --------------
-----------------------------
---------------- ------
-----------
-----------------
-----------------
--
-------------------以上代码中，我们自定义了表格的主题色。
7. 结尾
通过 mui-datatables-with-subcomponent，可以实现更美观、灵活、易于交互的数据展示。如果在使用中遇到问题或者想了解更多功能，可以查看官方文档或提出问题：mui-datatables-with-subcomponent GitHub。
示例代码：
-- -------------------- ---- -------
------ ---- ---- -------------------------
------ ------ ---- ---------------------------
------ ------ ---- ---------------------------
------ -------- ---- -----------------------------
------ ------- ---- ----------------------------
------ ---------- ---- -------------------------------
------ ---------- ---- ----------------------------
------ - --------------- ---------------- - ---- ---------------------------
------ - ---------------------------- - ---- -----------------------------------
----- ----- - ----------------
-------- -
-------- -
------ ----------
----- ----------
----- ----------
------------- ------
-
-
---
----- ------- - -
-
----- -------
-------- -
------- -----
-------------- ------
----------------- ------- ---------- -- -
----- -------- - ---------------------
------ -
----------------
--------
----------- --
---------
---- -------- -------- --------------- ----------- -- ---
----------- ------------------------------------------
----------- ----------------------- --------------------------
------
-----------------
--
-
-
--
-
----- --------
-------- -
------- ----
-
--
-
----- -----------
-------- -
------- -----
----------------- ----- -- -
------ -
----- ------------- --------------------------- --
--
-
-
-
--
----- ---- - -
----- --------- ----------- ---- ------ ---
-------- -------- ------------ ---- ----------- ---
------- -------- ----------- -------- ---
--------- ---------- ------------ --------- --
--
----- ------------- - -
-
----- ---
-------- -
------ -----
----------------- ------- ---------- ------------ -- -
------ -
-------
----------- -- -
----------------- - ----- - ------
--
-
------ - ------ - ------- -------
---------
--
-
-
--
----------
--
----- ---------- - -
---- ------------
-
---
--------- ------- --- -- ----- ----- --- -----
-- ------ ---- --- -- --- ------
----- -- --- ----
----------------
--------- --------- -------------- --------------
-------- --
---- -------- -------- -- ---
----------- --------------------- -------- ------------- - -----------------------
----------- ---------------------- -- --- ------- ------ --- --------------------
------
-----------
-----------------
-
--
----- ------- - -
------- -----
----------- -----------
----------- ---------
--------------- -----
--
------ ------- -------- ----- -
------ -
----------------- --------------
-----------------------------
------------ -------- ------
-----------------
-----------------------
-----------------
--
-------------------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac671b2