react项目表格内容轮播,DataV-React轮播表的使用

项目中想要实现表格表头固定不动,表格行内容轮播呈现的效果,antd中的table无法实现,使用DataV-React轮播表来实现。

官网地址:介绍 | DataV-React 轮播表 | DataV-React

  1. 安装
  • npm 安装

    npm install @jiaminghi/data-view-react

  • yarn 安装

    yarn add @jiaminghi/data-view-react

  1. 使用
javascript 复制代码
import React from 'react';
import { ScrollBoard } from '@jiaminghi/data-view-react';

const Index = () => {
  const config = {
    header: ['列1', '列2', '列3'], // 表头数据
    data: [ // 表数据
      ['行1列1', '行1列2', '行1列3'],
      ['行2列1', '行2列2', '行2列3'],
      ['行3列1', '行3列2', '行3列3'],
      ['行4列1', '行4列2', '行4列3'],
      ['行5列1', '行5列2', '行5列3'],
      ['行6列1', '行6列2', '行6列3'],
      ['行7列1', '行7列2', '行7列3'],
      ['行8列1', '行8列2', '行8列3'],
      ['行9列1', '行9列2', '行9列3'],
      ['行10列1', '行10列2', '行10列3']
    ],
    align: ['center', 'center', 'center'], // 列对齐方式
    headerBGC: ['transparent'], // 表头背景色
    evenRowBGC: ['transparent'], // 偶数行
    oddRowBGC: ['transparent'], // 奇数行
    columnWidth: [100, 100, 100], // 列宽度
    headerHeight: 40, // 表头高度
  };

  return (
    <ScrollBoard config={config} style={
  
  { width: '500px', height: '220px' }} />
  );
};

export default Index;

如果想要设置整个表格文字样式,可以在ScrollBoard的style属性中添加color等样式,针对某一列文字做特殊处理,可以采用以下两种方式:

1)样式文件中使用:global{}包裹元素选择器,设置样式。

2)参考官网中轮播表定制元素代码,为单元格添加行内样式:

javascript 复制代码
data: [
    ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
    ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
    ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
    ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
    ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
    ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
    ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
    ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
    ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
  ],
相关推荐
天天扭码6 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸26 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.29 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom35 分钟前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷1 小时前
CAPL编程_03
前端·数据库·笔记
帅云毅1 小时前
Web漏洞--XSS之订单系统和Shell箱子
前端·笔记·web安全·php·xss
北上ing1 小时前
同一页面下动态加载内容的两种方式:AJAX与iframe
前端·javascript·ajax
纪元A梦1 小时前
华为OD机试真题——推荐多样性(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
小墨宝2 小时前
js 生成pdf 并上传文件
前端·javascript·pdf
HED2 小时前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能