# dynamic-colums-table

**Repository Path**: kevin95271/dynamic-colums-table

## Basic Information

- **Project Name**: dynamic-colums-table
- **Description**: 动态列表格
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-05-01
- **Last Updated**: 2024-05-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">Welcome to 动态列表格组件 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0.3-blue.svg?cacheSeconds=2592000" />
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

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

### 组件效果

![Image text](https://gitee.com/jumping-little-stars/dynamic-colums-table/raw/master/assets/table.png)



```
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

```sh
cnpm i dynamic-tablelist-colums
```

## Author

👤 **llzm**

* Github: [可以点击进入git 查看组件效果或下载代码](https://gitee.com/jumping-little-stars/dynamic-colums-table)

## Show your support

Give a ⭐️ if this project helped you!

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_