sl1673495/react-antd-treetable

🌲 基于 Antd 二次开发的树状表格组件，支持层级缩进线、懒加载、子层级分页、子层级过滤等功能。

Welcome to react-antd-treetable 👋

介绍

基于 antd Table 组件封装，比较适合用于展示堆栈信息。

主要扩展的能力：

1. 层级缩进指示线
2. 远程懒加载子节点
3. 子节点分页
4. 子节点筛选
5. 子节点空提示

这些功能全部通过插件实现，其他的 props 全部继承自 Ant Design 的 Table 组件。

用法

需要依赖 antd, @ant-design/icons

npm i react-antd-treetable -S

最简单用法和 antd 的 Table 组件完全一致，数据中带有 children 字段即可：

import React from 'react';
import TreeTable from 'react-antd-treetable';

const data = [
  {
    name: 'foo',
    children: [
      {
        name: 'bar',
      },
    ],
  },
];

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
];

const App = () => {
  return <TreeTable rowKey="id" dataSource={data} columns={columns} />;
};

export default App;

文档

更多功能和用法请看：

https://react-antd-treetable.vercel.app/

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator

react-antd-treetable's Issues

1.0.3无法正常运行运行

相关版本
"umi": "^3.4.1",
"antd": "^4.15.0",
"react-antd-treetable": "^1.0.3"

devScripts.js:6523 [@umijs/runtime] load component failed Error: Module "./react-antd-treetable" does not exist in container.
while loading "./react-antd-treetable" from webpack/container/reference/mf
    at mf-va_remoteEntry.js:682 
    at LoadableComponent (http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.95b96b1e.async.js:408:68)
    at Route
    at Switch
    at Authorized (http://localhost:8000/umi.js:5336:23)
    at main
    at Basic (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.401378f0.async.js:378:25)
    at Adapter (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.401378f0.async.js:361:66)
    at ConfigProviderWrap (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-provider_es_index_js-node_modules_ant-design_pro-utils_es-f22a39.3ce17755.async.js:335:23)
    at WrapContent (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es_alert_style_index-c74c0f.9e1dd626.async.js:1440:21)
    at div
    at section
    at BasicLayout (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.401378f0.async.js:393:63)
    at Adapter (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.401378f0.async.js:361:66)
    at div
    at Provider (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_alert_ErrorBoundary_js-node_modules_antd_es_alert_index_js-node_-578a5c.2c62d72b.async.js:406:31)
    at BasicLayout (http://localhost:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es_alert_style_index-c74c0f.9e1dd626.async.js:675:66)
    at BasicLayout (http://localhost:8000/layouts__BasicLayout.js:1281:24)
    at ConnectFunction (http://localhost:8000/mf-dep_vendors-node_modules_dva_dist_index_esm_js.1bc04f3b.async.js:3387:68)
    at LoadableComponent (http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.95b96b1e.async.js:408:68)
    at Route
    at Switch
    at SecurityLayout (http://localhost:8000/layouts__SecurityLayout.js:54:5)
    at ConnectFunction (http://localhost:8000/mf-dep_vendors-node_modules_dva_dist_index_esm_js.1bc04f3b.async.js:3387:68)
    at LoadableComponent (http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.95b96b1e.async.js:408:68)
    at Route
    at Switch
    at Inspector (http://localhost:8000/mf-dep_vendors-node_modules_react-dev-inspector_es_index_js.0d4299bc.async.js:1055:20)
    at Layout (http://localhost:8000/layouts__BlankLayout.js:28:23)
    at LoadableComponent (http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.95b96b1e.async.js:408:68)
    at Route
    at Switch
    at Router (http://localhost:8000/mf-dep_vendors-node_modules_react-router-dom_esm_react-router-dom_js.336fcc02.async.js:2526:30)
    at RouterComponent (http://localhost:8000/mf-dep_vendors-node_modules_umijs_renderer-react_dist_index_esm_js.b5adcd4d.async.js:529:23)
    at Provider (http://localhost:8000/mf-dep_vendors-node_modules_dva_dist_index_esm_js.1bc04f3b.async.js:3101:20)
    at _DvaContainer (http://localhost:8000/umi.js:1633:5)
    at http://localhost:8000/umi.js:2134:24
    at FormProvider (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.8572e7fa.async.js:3803:31)
    at LocaleProvider (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.8572e7fa.async.js:448:87)
    at ProviderChildren (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.8572e7fa.async.js:280:24)
    at LocaleReceiver (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_context_js.95899783.async.js:718:87)
    at ConfigProvider (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.8572e7fa.async.js:388:13)
    at _LocaleContainer (http://localhost:8000/umi.js:3250:31)
    at http://localhost:8000/umi.js:3970:23

使用代码

import React from 'react';
import TreeTable from 'react-antd-treetable';

const data = [
  {
    name: 'foo',
    children: [
      {
        name: 'bar',
      },
    ],
  },
];

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
];

const App = () => {
  return <TreeTable rowKey="id" dataSource={data} columns={columns} />;
};

export default App;

如何实现支持可选择呢

加载后的数据选择框就失效了

子节点每个子节点分页器 当前页能不能设置成可控的？

因为使用了我的业务上 treetable有勾选的功能 我一旦勾选了第二页的子节点 会重新跳第一页

子节点懒加载首次请求无法更新视图

最新版本的antd, forceUpdate 并不能让table重新渲染。
再次点击展开图标后才会展示子节点