preface

Recently, A personal project needed a table component with drag-and-drop sorting and adjustable table column width, but the project itself did not use antD component library, so it did not directly use ANTD table component. After the investigation, react-DND was used to package a table component with drag-and-drop sorting and adjustable table column width. No problem has been found in the use of the project, it is still sufficient, and it will continue to increase if the function is not enough.

Repo address

  • GitHubAddress:Github.com/CCZX/react-…
  • npmAddress:www.npmjs.com/package/rea…

If you feel good, I hope you can give me a star✨. If you have any problems, you are welcome to point them out.

use

Installation:

NPM install react-drag-sort-table NPM install react-drag-sort-table NPM install react-drag-sort-tableCopy the code

Reference:

You need to import the CSS file manually.

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: 'Joe'.age: 21.address: 'Happiness Village No. 1'},
  { key: '2'.name: 'bill'.age: 22.address: 'Happiness Village No. 2'},
  { key: '3'.name: 'Cathy'.age: 23.address: 'Happiness Village no. 3'},]function SortTable() {
  const [dataSource, setDataSource] = useState(data)
  
  const handleSort = useCallback((data) = > {
    setDataSource(data)
  }, [])
  
  return <DragSortTable
    columns={columns}
    dataSource={dataSource}
    onSortDataSource={handleSort}
  />
}
Copy the code

Effect:

implementation

tsdx

Component library using TSDX to facilitate our development, save the development of the relevant configuration. TSDX is a rollup-based scaffolding tool for rapid development, testing, and release. For details, see tsdx.io/.

Using NPX TSDX create CMP to select the relevant template, you can quickly create the project. Note that TSDX does not support CSS, so we need to configure it separately and create a new tsdx.config.js file in the root directory of the project:

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 ]returnconfig; }};Copy the code

react-dnd

React – DND is a high-order component of React. It provides many useful apis. You only need to use the corresponding apis to operate the target component to implement the drag-and-drop function of elements. Can be used in class components and function components.

React-hooks I used it in react-hooks, involving useDrag and useDrop.

IO /react-dnd/d react-dnd/d And juejin. Cn/post / 684490… .

Code implementation

Drag and drop

  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)}})Copy the code

release

  • In the releasenpmMake sure you pack itnpmThe source is set tonpmOfficial source, recommended usenrmIt can be quickly and conveniently managednpmThe source of the
  • If no account can be usednpm adduserCommand then enter the account, password, email address to create a user, if outputLogged in as <user> on https://registry.npmjs.org/, the account has been successfully registered and logged in/Users/<user>/.npmrcConfiguration file view related information, if there is an account usednpm loginLog in to
  • It is best to configure one more component before publishing it.npmignoreFile uploaded tonpmTo ignore certain files
  • The last runnpm publishCommand to publish the component tonpm

The last

Thank you for reading this. If you think it’s good, please give a “like” to “star”.