react-native-table-component

使用文档

GitHub - dohooo/react-native-table-component：🌱为 react native 构建表

安装

yarn add react-native-table-component

使用

import React, {useState} from 'react';
import {StyleSheet} from 'react-native';
import {Table, Row, Rows} from 'react-native-table-component';

export const Demo = () => {
  const [tableHead, setTableHead] = useState([]);
  const [tableData, setTableData] = useState([]);
  const widthArr = [30, 120, 40, 30, 60, 40]; // 每列的列宽

  let head: any = ['序号', '日期', '值', '标志']; // 表头
  setTableHead(head);
  // 值
  let data: any = [
    [1, '2023-06-01', 0.04, '-'],
    [2, '2023-06-02', 0.08, '-'],
    [3, '2023-06-03', 0.06, '-'],
  ];
  setTableData(data);

  // 行点击事件
  const rowClick = (i: any) => {};

  return (
    <Table borderStyle={{borderWidth: 0}}>
      {/* 渲染表头 */}
      <Row
        data={tableHead}
        style={styles.tableHead}
        textStyle={{fontSize: 12, color: '#ffffff'}}
        widthArr={widthArr}
      />
      {/* 渲染表格数据 */}
      {tableData.map((rowData: any, i: number) => (
        <Row
          data={rowData}
          style={styles.tableRow}
          textStyle={{fontSize: 12}}
          widthArr={widthArr}
          onPress={() => rowClick(i)}
        />
      ))}
      {/* 不需要行点击事件的时候，表格数据的渲染也可以用 Rows 实现 */}
      <Rows
        data={tableData}
        style={styles.tableRow}
        textStyle={{fontSize: 12}}
        widthArr={widthArr}
      />
    </Table>
  );
};

const styles = StyleSheet.create({
  tableHead: {
    backgroundColor: '#5CBAFD',
    padding: 3,
  },
  tableRow: {
    paddingTop: 1,
    paddingBottom: 1,
    paddingLeft: 3,
    paddingRight: 3,
  },
});