react-native-scrollview-table

This is a react native scrolling table with thead and left first column fixed, suitable for android and ios

Installation

android

yarn add react-native-react-native-scrollview-table

or

npm install react-native-react-native-scrollview-table

ios

cd ios && pod install

Basic usage

import ScrollTable from 'react-native-scrollview-table';

<ScrollTable
  data={dataSource}
  columns={columns}
/>

scrollTable

props

props extends native ScrollViewProps

| Name | Type | Default | Description | |---------------------|---------------------------------------------------------------|---------------------|---------------------------| | data | object[] | - | *required | | columns | ColumnsType[] | - | *required | | rowHeight | number | 40 | A unified line height | | loading | boolean | undefined | - | | | refreshing | boolean | - | | | horizontalScroll | boolean | - | | | pagination | Ipagination | {} | | | styles | Istyle | {} | | | emptyConfig | EmptyPropsType | text: 'no data' | | | restScollView | extend Native ScrollViewProps | - | | | rowStyle | function(index?: number) => ViewStyle; | - | custom a row of style | | onChange | function(pagination: Ipagination, order: Isort) => void; | - | Paging and sorting table, must with pagination | | onRefresh | function() => void; | - | | | onRowPress | function(item: any, index: number) => void; | - | | | renderFooter | function() => ReactNode; | - | |

interface Icolumns {
  dataIndex: string;
  title?: string | ReactNode;
  flex?: number; // first col is the percentage of the screen width,otherwise is on the right side of the width of the scroll area percentage
  style?: ViewStyle; // teble cell style
  sorter?: Iorder;
  sortEmpty?: boolean;
  sortHeaderAlign?: HeaderAlign;  // only control order col style
  render?: (value?: string | number, item?: any) => string | ReactNode;
}

type Ipagination {
  pageIndex: number; // required
  pageTotal: number; // required
  startIndex: number; // required The start page paging (somebody like start start with 0)
}

type Istyle {
  theaderStyle?: ViewStyle;
  tbodyStyle?: ViewStyle;
}

interface EmptyPropsType {
  style?: ViewStyle,
  extra?: React.ReactNode;
  image?: NodeRequire;
  imageStyle?: ImageStyle;
  text?: string;
  textStyle?: TextStyle;
}

type HeaderAlign = 'flex-start' | 'flex-end' | 'center';
type IjustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
type Iorder = "" | "asc" | "desc";