传入指定数据，实现表格动态列展示;

组件效果

import {TableComponent} from 'dynamic-colums-table' //导入组件
import React, { useState, useEffect } from 'react' //引入React

function App() {
 
  const [listTotal, setListTotal] = useState(0);
  const [listSize, setListSize] = useState(0);
  const [current, setCurrent] = useState(1);

  const datalist= [
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'},
    {id:'展示数据'}
    ]

  const columns = [
    {
      title: '列1',
      dataIndex: 'index',
      width: 30,
    },
    {
      title: '列2',
      dataIndex: 'id',
      width: 30,
    },
    {
      title: '列3',
      dataIndex: 'name',
      width: 30,
    },
    {
      title: '列4',
      dataIndex: 'yaer',
      width: 30,
    },
    {
      title: '列5',
      dataIndex: 'list',
      width: 30,
    },
    
  ]
  <!-- 分页控制 -->
  const paginationChange = (pageCurrent, pageSize) => {
   
  };
  
  return (
    <div className="App">
     <!-- 必传项 columns,dataSource -->

     <!-- total,size,current应一起传入，或一起不传入 -->

      <TableComponent
        columns={columns}
        dataSource={datalist}
        total={listTotal}
        size={listSize}
        defaultCurrent={current}
        current={current}
        paginationChange={paginationChange}
      />
    </div>
  );
}

export default App;

Install

cnpm i dynamic-tablelist-colums

Author

👤 llzm

• Github: 可以点击进入git 查看组件效果或下载代码

Show your support

Give a ⭐️ if this project helped you!

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