@uiw/react-native/lib/Table/index.js

UIW for React Native

import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import BodyRow from './BodyRow';
import { colors } from '../utils';
// table组件
const Table = ({
  data,
  columns,
  rowKey,
  horizontal = true,
  style
}) => {
  const getRowKey = record => {
    const key = typeof rowKey === 'function' ? rowKey(record) : record && record[rowKey];
    return key;
  };
  return <ScrollView testID="RNE__Table__wrap" style={[styles.conW, style]} horizontal={horizontal}>
      <ScrollView horizontal={!horizontal}>
        <View testID="RNE__Table__header" style={styles.conTitle}>
          {columns.map((itm, idx) => <View key={itm.dataIndex + idx} style={[styles.contRight, {
          borderRightWidth: idx === columns.length - 1 ? 0 : 1
        }, itm.style ? itm.style : styles.titleFlex]}>
              <Text style={styles.content}>{itm.title}</Text>
            </View>)}
        </View>
        <View testID="RNE__Table__body">
          {data.map((item, idx) => {
          const key = getRowKey(item);
          return <BodyRow key={key} columns={columns} record={item} />;
        })}
        </View>
        {data.length === 0 && <Text style={styles.noDataText}>暂无数据...</Text>}
      </ScrollView>
    </ScrollView>;
};
const styles = StyleSheet.create({
  title: {
    backgroundColor: colors.white,
    height: 30
  },
  conTitle: {
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: colors.colorsPalette.dark70
  },
  content: {
    color: colors.colorsPalette.dark30
  },
  contRight: {
    borderRightWidth: 1,
    borderRightColor: colors.colorsPalette.dark70,
    borderBottomColor: colors.colorsPalette.dark70,
    color: '#888888',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 5,
    paddingBottom: 5
  },
  conW: {
    backgroundColor: colors.white
  },
  noDataText: {
    color: '#888888',
    textAlign: 'center',
    paddingTop: 4,
    paddingBottom: 4
  },
  titleFlex: {
    flex: 1
  }
});
export default Table;