移动端 h5-table react版本支持虚拟列表

已于 2024-01-19 15:55:02 修改
阅读量1k 收藏 10
点赞数 6
文章标签： react.js 前端 前端框架
于 2024-01-19 15:39:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45485922/article/details/135697258
版权

介绍

适用于 react + ts 的 h5 移动端项目 table 组件

github 链接 ：https://github.com/duKD/react-h5-table

有帮助的话 给个小星星

有两种表格组件
常规的：
支持 左侧固定 滑动 每行点击回调 支持 指定列排序 支持滚动加载更多

效果和之前写的vue3 版本类似
vue3 h5 表格

请添加图片描述

大数据量时 使用虚拟列表：
也支持 左侧固定 滑动 每行点击回调 支持 指定列排序 不支持滚动加载

请添加图片描述

开始

npm i @lqcoder/react-h5-table

入口 引入table样式文件

import "@lqcoder/react-h5-table/scripts/style.css";

常规版使用

相关 props 配置 说明

export type tablePropsType<T = any> = {
  rowKey?: string; //表格行 key 的取值字段 默认取id字段
  minTableHeight?: number; //表格最小高度
  showRowNum?: number; // 表格显示几行
  headerHeight?: number; // 头部默认高度
  rowHeight?: number; //每行数据的默认高度
  column: Array<columnItemType<T>>;
  tableData: Array<T>;
  clickOptions?: clickOptions<T>; // 是否需要处理点击事件
  disable?: boolean; // 是否启用下拉加载
  pullDownProps?: pullDownPropsType;
  changePullDownProps?: (args: pullDownPropsType) => void; // 修改加载状态
  handleHeadSortClick?: (propsKey: string, type: sortStatusType) => void;
  onload?: () => void; // 数据加载
  rootValue?: number; //
};



export type columnItemType<T = any> = {
  title: string; // 列名
  dataIndex: string; // table data key 值
  width: number; // 列 宽度
  sortable?: boolean; //是否 支持排序
  align?: "left" | "center" | "right"; // 布局
  render?: (item: T, index?: number) => any; //自定义单元格显示的内容
};

// 下拉加载相关配置
export type pullDownPropsType = {
  error?: boolean; // 数据加载失败
  loading?: boolean; // 数据处于加载状态
  finish?: boolean; // 数据 是否完全加载
  loadingText?: string; // 加载文案
  errorText?: string; // 失败文案
  finishedText?: string; // 完成文案
  offset?: number; //触发加载的底部距离
};

//  点击相关配置
export type clickOptions<T> = {
  clickRender: (item: T, index: number) => React.JSX.Element; // 点击列触发渲染
  clickHeight: number; // 显示栏的高度 
};

代码示例：


// App.tsx 文件
import { useRef, useState } from "react";
import {
  H5Table,
  clickOptions,
  columnItemType,
  sortStatusType,
} from "@lqcoder/react-h5-table";

import Styles from "./App.module.scss";

function App() {
  type dataType = {
    id: number;
    type?: number;
    select: string;
    position: string;
    use: string;
    markValue: string;
    cur: string;
    cost: string;
    newPrice: number;
    float: string;
    profit: string;
    count: string;
  };
  const column: Array<columnItemType<dataType>> = [
    {
      title: "班费/总值",
      width: 250,
      dataIndex: "rateAndSum",
      render(item, _index) {
        return (
          <section className="nameAndMarkValue">
            <div className="name">
              {item.select}
              <span className="type">{item.type === 1 ? "深" : "沪"}</span>
            </div>
            <div className="markValue">
              {item.markValue}=={item.id}
            </div>
          </section>
        );
      },
      align: "left",
    },
    {
      title: "持仓/可用",
      dataIndex: "positionAndUse",
      sortable: true,
      width: 200,
      align: "right",
      render(item, _index) {
        return (
          <section className="positionAndUse">
            <div className="position">{item.position}</div>
            <div className="use">{item.use}</div>
          </section>
        );
      },
    },
    {
      title: "现价/成本",
      dataIndex: "curAndCost",
      sortable: true,
      width: 200,
      align: "right",
      render(item) {
        return (
          <section className="curAndCost">
            <div className="cur">{item.cur}</div>
            <div className="cost">{item.cost}</div>
          </section>
        );
      },
    },
    {
      title: "浮动/盈亏",
      dataIndex: "float",
      width: 200,
      align: "right",
      render(item) {
        return (
          <section className="floatAndProfit">
            <div className="float">{item.float}</div>
            <div className="profit">{item.profit}</div>
          </section>
        );
      },
    },
    {
      title: "账户资产",
      dataIndex: "count",
      width: 200,
    },
  ];

  const temp = Array.from({ length: 20 }).map((item, index) => {
    return {
      id: index,
      select: "三年二班",
      type: 1,
      position: `${27000 + index * 10}`,
      use: "5,000",
      markValue: "500,033.341",
      cur: "30.004",
      cost: "32.453",
      newPrice: 20,
      float: "+18,879.09",
      profit: "-5.45%",
      count: "120,121",
    };
  });

  const dataRef = useRef(temp);

  const [data, setData] = useState(temp);

  const [pullDownProps, setPullDownProps] = useState({
    offset: 10,
    error: false, // 数据加载失败
    loading: false, // 数据处于加载状态
    finish: false, // 数据 是否完全加载
    loadingText: "加载中...", // 加载文案
    errorText: "出错了", // 失败文案
    finishedText: "到底了", // 完成文案
  });

  const onload = () => {
    setTimeout(() => {
      const len = data.length;
      setData(
        data.concat(
          Array.from({ length: 10 }).map((item, index) => {
            return {
              id: len + index,
              select: "三年二班",
              type: 1,
              position: "28000",
              use: "5,000",
              markValue: "500,033.341",
              cur: "30.004",
              cost: "32.453",
              newPrice: 20,
              float: "+18,879.09",
              profit: "-5.45%",
              count: "120,121",
            };
          })
        )
      );
      dataRef.current = dataRef.current.concat(
        Array.from({ length: 10 }).map((item, index) => {
          return {
            id: len + index,
            select: "三年二班",
            type: 1,
            position: "28000",
            use: "5,000",
            markValue: "500,033.341",
            cur: "30.004",
            cost: "32.453",
            newPrice: 20,
            float: "+18,879.09",
            profit: "-5.45%",
            count: "120,121",
          };
        })
      );
      setPullDownProps({
        ...pullDownProps,
        loading: false,
      });
    }, 1000);
  };

  const changePullDownProps = (args: any) => {
    setPullDownProps(args);
  };

  /**
   * 处理排序按钮回调 处理逻辑交给开发
   * @param propsKey 点击的列名
   * @param type 0 默认 1 升 2 降
   * @returns
   */
  const handleHeadSortClick = (propsKey: string, type: sortStatusType) => {
    if (type === 0) {
      setData(dataRef.current);
      return;
    }
    if (propsKey === "positionAndUse") {
      if (type === 1) {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(b.position) - Number(a.position)
        );
        setData(temp);
      } else {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(a.position) - Number(b.position)
        );
        setData(temp);
      }
    }

    if (propsKey === "curAndCost") {
      if (type === 1) {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(b.cur) - Number(a.cur)
        );
        setData(temp);
      } else {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(a.cur) - Number(b.cur)
        );
        setData(temp);
      }
    }
  };

  const handelSell = () => {
    console.log("handelSell----");
  };

  const clickOptions: clickOptions<dataType> = {
    clickRender(item, index) {
      return (
        <section className={Styles["rowDownMark"]}>
          <div className={Styles["rowDownMark-item"]} onClick={handelSell}>
            买入
          </div>
          <div className={Styles["rowDownMark-item"]}>卖出</div>
          <div className={Styles["rowDownMark-item"]}>行情</div>
        </section>
      );
    },
    clickHeight: 60,
  };

  return (
    <>
      <H5Table<dataType>
        disable
        column={column}
        tableData={data}
        onload={onload}
        pullDownProps={pullDownProps}
        changePullDownProps={changePullDownProps}
        handleHeadSortClick={handleHeadSortClick}
        clickOptions={clickOptions}
      ></H5Table>
    </>
  );
}

export default App;


// App.module.scss
.app {
  color: red;
  font-size: 20px;
  .container {
    color: aqua;
  }
}
.rowDownMark {
  width: 100%;
  display: flex;
  height: 60px;
  background-color: #fcfcfc;
  align-items: center;
}
.rowDownMark-item {
  flex-grow: 1;
  color: #309fea;
  text-align: center;
}

大数据量时 使用虚拟列表

相关props 说明

export type virtualTablePropsType<T = any> = {
  rowKey?: string; //表格行 key 的取值字段 默认取id字段
  minTableHeight?: number; //表格最小高度
  showRowNum?: number; // 表格显示几行
  headerHeight?: number; // 头部默认高度
  rowHeight?: number; //每行数据的默认高度
  column: Array<columnItemType<T>>;
  tableData: Array<T>;
  clickOptions?: clickOptions<T>; // 是否需要处理点击事件
  handleHeadSortClick?: (propsKey: string, type: sortStatusType) => void;
  rootValue?: number; //
};

// 0 默认 1 升 2 降
export type sortStatusType = 0 | 1 | 2;

export interface virtualTableInstance {
  scrollIntoView: (index: number) => void;
}

export type columnItemType<T = any> = {
  title: string; // 列名
  dataIndex: string; // table data key 值
  width: number; // 列 宽度
  sortable?: boolean; //是否 支持排序
  align?: "left" | "center" | "right"; // 布局
  render?: (item: T, index?: number) => any; //自定义单元格显示的内容
};

//  点击相关配置
export type clickOptions<T> = {
  clickRender: (item: T, index: number) => React.JSX.Element; // 点击列触发渲染
  clickHeight: number; // 显示栏的高度
};

代码示例：

// App.tsx
import { useRef, useState } from "react";
import {
  H5VirtualTable,
  clickOptions,
  columnItemType,
  sortStatusType,
  virtualTableInstance,
} from "@lqcoder/react-h5-table";

import Styles from "./App.module.scss";

function App() {
  type dataType = {
    id: number;
    type?: number;
    select: string;
    position: string;
    use: string;
    markValue: string;
    cur: string;
    cost: string;
    newPrice: number;
    float: string;
    profit: string;
    count: string;
  };
  const column: Array<columnItemType<dataType>> = [
    {
      title: "班费/总值",
      width: 250,
      dataIndex: "rateAndSum",
      render(item, _index) {
        return (
          <section className="nameAndMarkValue">
            <div className="name">
              {item.select}
              <span className="type">{item.type === 1 ? "深" : "沪"}</span>
            </div>
            <div className="markValue">
              {item.markValue}=={item.id}
            </div>
          </section>
        );
      },
      align: "left",
    },
    {
      title: "持仓/可用",
      dataIndex: "positionAndUse",
      sortable: true,
      width: 200,
      align: "right",
      render(item, _index) {
        return (
          <section className="positionAndUse">
            <div className="position">{item.position}</div>
            <div className="use">{item.use}</div>
          </section>
        );
      },
    },
    {
      title: "现价/成本",
      dataIndex: "curAndCost",
      sortable: true,
      width: 200,
      align: "right",
      render(item) {
        return (
          <section className="curAndCost">
            <div className="cur">{item.cur}</div>
            <div className="cost">{item.cost}</div>
          </section>
        );
      },
    },
    {
      title: "浮动/盈亏",
      dataIndex: "float",
      width: 200,
      align: "right",
      render(item) {
        return (
          <section className="floatAndProfit">
            <div className="float">{item.float}</div>
            <div className="profit">{item.profit}</div>
          </section>
        );
      },
    },
    {
      title: "账户资产",
      dataIndex: "count",
      width: 200,
    },
  ];

  const temp = Array.from({ length: 20000 }).map((item, index) => {
    return {
      id: index,
      select: "三年二班",
      type: 1,
      position: `${27000 + index * 10}`,
      use: "5,000",
      markValue: "500,033.341",
      cur: "30.004",
      cost: "32.453",
      newPrice: 20,
      float: "+18,879.09",
      profit: "-5.45%",
      count: "120,121",
    };
  });

  const dataRef = useRef(temp);
  const tableRef = useRef<virtualTableInstance>();

  const [num, setNum] = useState(1);
  const [data, setData] = useState(temp);

  /**
   * 处理排序按钮回调 处理逻辑交给开发
   * @param propsKey 点击的列名
   * @param type 0 默认 1 升 2 降
   * @returns
   */
  const handleHeadSortClick = (propsKey: string, type: sortStatusType) => {
    if (type === 0) {
      setData(dataRef.current);
      return;
    }
    if (propsKey === "positionAndUse") {
      if (type === 1) {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(b.position) - Number(a.position)
        );
        setData(temp);
      } else {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(a.position) - Number(b.position)
        );
        setData(temp);
      }
    }

    if (propsKey === "curAndCost") {
      if (type === 1) {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(b.cur) - Number(a.cur)
        );
        setData(temp);
      } else {
        const temp = [...dataRef.current].sort(
          (a, b) => Number(a.cur) - Number(b.cur)
        );
        setData(temp);
      }
    }
  };

  const handelSell = () => {
    console.log("handelSell----");
  };

  const clickOptions: clickOptions<dataType> = {
    clickRender(item, index) {
      return (
        <section className={Styles["rowDownMark"]}>
          <div className={Styles["rowDownMark-item"]} onClick={handelSell}>
            买入
          </div>
          <div className={Styles["rowDownMark-item"]}>卖出</div>
          <div className={Styles["rowDownMark-item"]}>行情</div>
        </section>
      );
    },
    clickHeight: 60,
  };
  const scrollTo = () => {
    tableRef.current?.scrollIntoView(num);
  };

  const getValue = (val: any) => {
    setNum(Number(val.target.value) || 0);
  };

  return (
    <>
      <input type="text" onChange={getValue} />
      <button onClick={scrollTo}>跳到</button>
      <H5VirtualTable<dataType>
        disable
        column={column}
        tableData={data}
        handleHeadSortClick={handleHeadSortClick}
        clickOptions={clickOptions}
        ref={tableRef}
      ></H5VirtualTable>
    </>
  );
}

export default App;


// App.module.scss
.app {
  color: red;
  font-size: 20px;
  .container {
    color: aqua;
  }
}
.rowDownMark {
  width: 100%;
  display: flex;
  height: 60px;
  background-color: #fcfcfc;
  align-items: center;
}
.rowDownMark-item {
  flex-grow: 1;
  color: #309fea;
  text-align: center;
}
cheerfulCoder
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XTableView：一个带侧滑菜单的二维表格控件，移动端h5开发调试
m0_66264699的博客
01-18 283
如何实现惯性滚动？ 主要借助于 Scroller 的 fling 方法，fling可以让View在滑动到某个位置之后以一定的速度惯性滚到一段距离。因此在收到 MotionEvent.ACTION_UP 事件时（即手指抬起时），将惯性滚动前的初始ScrollX值作为fling的起始参数，然后依旧是在 computeScroll 方法里面获取最新滚动到的ScrollX值去同步给其他LinearLayout，实现所有横向列表整体惯性。 如何处理侧滑与横向列表的滑动冲突？ 这里的侧滑实现是基于 SwipeRecyc
html移动端表格插件,移动端类table组件封装
weixin_42399813的博客
06-27 1982
简介一个不怎么高度自定义的移动端table组件，可创建不定数量的列的table(自己写着玩为了以后维护修改样式方便封装起来的实现思路表格头部一个循环：循环渲染每一列的列名表格内容两重循环：外层循环渲染行，内层循环渲染每一行的每一列的内容实现环境：vue + vantui，用van-row + van-col模拟行和列// 封装的table组件{{item.name}}export default ...
基于VUE移动端H5表格组件
最新发布
月影神社
06-21 229
使用（根据自身项目调整，本例子只做参考）
H5移动端滑动表格固定表头和首列（纯css实现）
qq_45447899的博客
01-19 3665
HTML部分 <template> <!-- 表格部分 --> <div class="contain"> <table class="tb1" frame="void" border="0" cellspacing="0" cellpadding="0"> <thead> <th>...
前端开发：基于移动端的JS原生Table的使用_移动端 table
2401_84139963的博客
04-19 673
在基于移动端的前端开发过程中，会使用类似PC端的列表展示，即table表格的使用，但是基于移动端的前端框架Vant是没有提供对应的组件库，这就需要使用JS原生的Table，需要在基于移动端的前端开发的时候结合原生的表格使用，那么本篇博文就来分享一下关于在前端开发的时候基于移动端的JS原生Table的运用。
react移动端table分页
七色花
02-26 2181
https://www.cnblogs.com/vichily/p/6432558.html import React from 'react'; import { SearchBar, Icon, Pagination } from 'antd-mobile'; import './index.less'; export default class AddressBook extend...
react+umi+antdmobile+ali-react-table移动端开发
u014651093的专栏
01-24 1358
react+umi+antdmobile+ali-react-table移动端开发
h5 Table表格
qq_38932407的博客
04-15 5305
table:表格 tr:行rowspan：占据行数 td列 clospan：占据列数 th表头（浏览器默认样式粗体居中） caption标题（浏览器默认样式居中）
react使用useRef实现h5表头和列表内容同步左右滑动
qq_37057426的博客
02-04 444
useRef实现h5表头和列表内容同步左右滑动
react-mobile:基于react的移动端H5框架
05-08
基于react + webpack 的单页面移动端应用,不依靠create-react-app脚手架 项目结构 |-- build webpack配置文件夹 |-- utils.js 所用方法 |-- webpack.config.js 公共配置 |-- webpack.dev.js 开发配置 |-- ...
react-board:React H5 移动端项目模板
05-26
从零搭建 React 开发 H5 模板项目创建创建项目文件夹mkdir react-democd react-demonpm init -y依赖安装yarn add react react-domyarn add webpack webpack-cli webpack-dev-server webpack-mergebabel-core babel-...
html5手机端统计图表插件
09-04
html5手机端统计图表插件
用H5 的table标签制作个人简历的表格.html
09-21
用Visual Studio Code编译器中的H5中table标签制作一个表格，这个是只用Table标签制作了一个个人简历的表格
移动端自适应插件
06-05
自适应移动端页面，PC页面也可以
tabler-icons-react:React React的Tabler图标
04-28
安装该软件包后，您可以将Tabler Icons导入为React组件，如下所示： import { Activity } from 'tabler-icons-react' ; 例子 import React from 'react' ; import { Activity } from 'tabler-icons-react' ; ...
react-virtual-table:高性能虚拟加载表格，支持表头缩放
08-04
React-virtual-table虚拟加载表格轻量级实现不到100行代码支持表格宽度拖拽调节demo源码见githubsnapshot
h5-cra-react:react配置移动端项目
05-31
创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录中，您可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 ...
H5 table表格案例、边距 解析（表格带有滚动条）
林中明月间丶
12-18 8741
一个简单的表格： <table id="tab1" width="100%" cellspacing="0" border="1px"> <thead> <tr> <th>第一季度</th> <th>第二季度</th> <th>第三季度...
php商品布局h5,H5的div布局与table布局详解
weixin_35406877的博客
03-11 161
这次给大家带来H5的div布局与table布局详解，H5div布局与table布局的注意事项有哪些，下面就是实战案例，一起来看一下。本文实例为大家解析了html5 p布局与table布局，供大家参考，具体内容如下p布局：html+css实现简单布局。#container中height不能写成百分数，必须为具体高度。p布局body{margin:0;padding:0;}#container{wid...
antd table react-windows虚拟列表
05-24
Antd Table 是 Ant Design 框架中的一个表格组件，而 react-window 则是一个能够帮助 React 应用中高效渲染大量数据的组件。使用 react-window 能够减少因为渲染大量数据而导致页面卡顿的情况，提升用户的使用体验。 如果你希望在 Antd Table 中使用 react-window 的虚拟列表功能，可以先安装 react-window: ``` npm install react-window ``` 然后，在 Antd Table 中使用 react-window 的虚拟列表功能，需要进行如下操作： 1. 引入 react-window 库中的 List 组件 2. 在 columns 配置项中，设置 fixed 属性，以确保表头的列不会被虚拟化 3. 在 dataSource 中，只保留当前可见区域的数据，而不是全部数据。 下面是一个 Antd Table 中使用 react-window 的示例代码： ```jsx import { Table } from 'antd'; import { List } from 'react-window'; const VirtualTable = props => { const { columns, dataSource } = props; const renderRow = ({ index, style }) => { const rowData = dataSource[index]; return ( <div style={style}> <Table.Row key={rowData.key} record={rowData} index={index} columns={columns} /> </div> ); }; return ( <Table {...props} columns={columns.map(column => ({ ...column, fixed: column.fixed || 'left', }))} pagination={false} components={{ body: ({ children, ...restProps }) => { return ( <List height={400} itemCount={dataSource.length} itemSize={54} width={1000} {...restProps} > {renderRow} </List> ); }, }} /> ); }; export default VirtualTable; ``` 在上述代码中，我们将 Antd Table 包装在一个名为 VirtualTable 的组件中，该组件使用 react-window 的 List 组件来渲染表格数据。其中，itemCount 和 itemSize 属性分别设置了数据总数和每一行的高度，height 和 width 属性则分别设置了表格的高度和宽度。在 renderRow 函数中，我们根据当前的 index 和 style 来渲染每一行的数据。最后，我们将 List 组件作为 Antd Table 的 body 组件，以实现虚拟列表的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值