npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@yangjianfei/react-antd-column-resize

v1.0.1

Published

活跃中,修复了一些bug,欢迎大家提issue一起维护

Downloads

4

Readme

中文文档 | English NPM version NPM downloads

简介

react-antd-column-resize 是一个基于 react hooks 开发的 antd 表格(table)列宽拖动组件, 支持 antd4、antd5 和 ant-design/pro-components 以及所有基于 antd 开发的 table 组件。 其核心 hooksuseAntdColumnResize,可以自定义拖动的最小宽度、最大宽度和默认宽度方便快捷。 已经使用 antd4、antd5 官网中的 table 示例例进行测试,可以正常使用。

安装

npm install --save react-antd-column-resize

# or use yarn

yarn add react-antd-column-resize

使用

import { Button, Divider, Table } from 'antd';
import React from 'react';
import { useAntdColumnResize } from 'react-antd-column-resize';

const App = () => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      align: 'center',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      width: 100,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      width: 300,
    },
    {
      title: 'phone',
      dataIndex: 'phone',
      key: 'phone',
      fixed: 'right',
      //width:"必须有一项不设置宽度,不然会造成拖动异常"
      //width:"必须有一项不设置宽度,不然会造成拖动异常"
      //width:"必须有一项不设置宽度,不然会造成拖动异常"
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John Doe',
      age: 32,
      address: '123 Street, City',
      phone: '1588553336',
    },
    {
      key: '2',
      name: 'Jane Smith',
      age: 28,
      address: '456 Road, Town',
      phone: '1588553336',
    },
  ];
  const { resizableColumns, components, tableWidth, resetColumns } =
    useAntdColumnResize(() => {
      return { columns, minWidth: 100 };
    }, []);

  return (
    <div className="app">
      <Button onClick={resetColumns}>重置Columns</Button>
      <Divider />
      <Table
        columns={resizableColumns}
        dataSource={data}
        components={components}
        bordered
        scroll={{ x: tableWidth }}
      />
    </div>
  );
};

export default App;

useAntdColumnResize API

useAntdColumnResize(setup: () => resizeDataType, dependencies: any[])

| 参数 | 说明 | 类型 | 默认值 | | ------------ | -------------- | ------------------------------ | ------ | | setup | 获取列配置函数 | () => resizeDataType<Column> | - | | dependencies | 更新依赖项 | any[] | - |

resizeDataType setup 返回数据类型

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | --------------------------- | ------ | | columns | 列配置 | object[] antd table columns | - | | minWidth | 最小宽度 | number | 120 | | maxWidth | 最大宽度 | number | 2000 |

useAntdColumnResize 返回数据

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | --------------- | --------------------------- | ------ | | resizableColumns | 可拖动列配置 | object[] antd table columns | - | | components | antd table 组件 | object | - | | tableWidth | 表格宽度 | number | - | | resetColumns | 重置列 | function | - |

注意事项(请一定阅读,请一定阅读,请一定阅读,尤其是第二项)

  1. columns 设置每项 width 时,默认该项是可拖动项,并且请确保含有唯一标识(dataIndex或者key)。
  2. columns 至少需要一项不设置 width,否则会拖动异常,minWidth 默认是未设置项宽度的最小宽度。 原因:当 columns 每项设置的宽度之和小于表格宽度时,会造成拖动异常,所以需要至少一项不设置宽度,让其自适应。
  3. minWidthmaxWidth 代表可拖动的距离,建议 minWidth等于 columns 设置的最小宽度项,最大宽度同理应大于columns 设置的最大宽度项。
  4. 请不要欺骗useAntdColumnResizedependencies 依赖项请按需添加,否则会造成无限循环。

贡献

如果对您有帮助希望动动您发财的小手,给个 star 吧!

欢迎贡献代码、提出问题或者改进建议。请查阅贡献指南了解更多详情。

Stargazers over time

Stargazers over time