一个可调整顺序、宽度的react table组件 -- npm

cAuth
1,972 阅读3分钟

前言

最近做个人项目的时候需要一个可以具有拖拽排序功能以及可调整表格列宽功能的表格组件，但是项目本身没有使用antd组件库，所以也就没有直接使用antd的table组件。在进行了调查之后使用react-dnd封装了一个具有拖拽排序以及可调整表格列宽功能的table组件。在项目中使用还没有发现什么问题，还够用，后续如果功能不够还会继续增加。

repo地址

如果小伙伴你觉得还不错希望给我一个star✨哦，有问题的地方也欢迎小伙伴们指出来。

使用

安装：

// 使用npm
npm install react-drag-sort-table
// 使用yarn
yarn add react-drag-sort-table

引用：

需要手动引入css文件。

import DragSortTable from 'react-drag-sort-table'
import 'react-drag-sort-table/dist/dist.min.css'

const columns = [
  {
    title: 'Name',
    dataKey: 'name',
    key: 'name',
    width: '80',
    render(name) {
      return <input value={name} />
    }
  },
  {
    title: 'Age',
    dataKey: 'age',
    key: 'age',
    required: true
  },
  {
    title: 'Address',
    dataKey: 'address',
    key: 'address',
  },
]

const data = [
  { key: '1', name: '张三', age: 21, address: '幸福村1号'},
  { key: '2', name: '李四', age: 22, address: '幸福村2号'},
  { key: '3', name: '王五', age: 23, address: '幸福村3号'},
]

function SortTable() {
  const [dataSource, setDataSource] = useState(data)
  
  const handleSort = useCallback((data) => {
    setDataSource(data)
  }, [])
  
  return <DragSortTable
    columns={columns}
    dataSource={dataSource}
    onSortDataSource={handleSort}
  />
}

实现效果：

实现

tsdx

组件库采用tsdx来方便我们进行开发，省去了开发的相关配置。tsdx是一个基于Rollup的可以帮助我们快速开发、测试、发布的一个脚手架工具，具体内容可以查看官网的介绍：tsdx.io/ 。

使用npx tsdx create cmp选择相关模板可以快速创建项目，需要注意的是tsdx并没有支持css，所以我们要单独配置一下，在项目的根目录新建tsdx.config.js文件：

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins = [
      postcss({
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        extract: 'dist.min.css',
      }),
      ...config.plugins
    ]
    return config;
  },
};

react-dnd

react-dnd是react的高阶组件，提供了很多有用的API，使用的时候只需要使用对应的 API 将目标组件进行操作，即可实现元素的拖拽功能。可以在class组件和function组件中使用。

我是在react-hooks中使用的，主要涉及到useDrag和useDrop两个函数。

具体使用大家可以看 react-dnd.github.io/react-dnd/d… 和 juejin.cn/post/684490… 。

代码实现

拖拽

  const [{ isDragging }, drag, dragPreview] = useDrag({
    item: withTypeRowData,
    collect(monitor: DragSourceMonitor) {
      return {
        isDragging: monitor.isDragging()
      }
    },
    end() {
      setToIndex(0)
      setFromIndex(0)
    }
  })

  const [, drop] = useDrop({
    accept: EDragTypes.tableRow,
    hover(item: typeof withTypeRowData) {
      const dragIndex = item.index;
      const hoverIndex = rowIndex;
      
      if (dragIndex === hoverIndex) {
        return
      }
      
      fromIndex !== dragIndex && setFromIndex(dragIndex)
      toIndex !== hoverIndex && setToIndex(hoverIndex)
    },
    drop(item: typeof withTypeRowData) {
      const dragIndex = item.index;
      const hoverIndex = rowIndex;
      moveRow(dragIndex, hoverIndex, isDragging);
    },
    collect() {
      setToIndex(0)
      setFromIndex(0)
    }
  })

发布

  • 在发布npm包的时候一定要npm源设置为npm的官方源，推荐使用nrm可以快速方便管理npm的源
  • 如果没有账号可以使用npm adduser命令然后输入账号、密码、邮箱来创建用户，如果输出Logged in as <user> on https://registry.npmjs.org/，则说明账号注册并登陆成功，可以在/Users/<user>/.npmrc 配置文件查看相关信息，如果已经有账号使用 npm login 登录即可
  • 在发布组件之前最好再配置一个.npmignore文件，上传至npm时来忽略某些文件
  • 最后运行npm publish命令即可将组件发布到npm

最后

感谢你看到这里，如果觉得不错希望点个赞给个 star 吧。

avatar
文章
阅读
粉丝