React Native Tabeller

This is a table component for react native.

• Installation
• Examples
• Properties
• Notice
• License

Demos

• iOS
• Android

Installation

npm install https://cdn.sheetjs.com/react-native-tabeller-0.1.0/react-native-tabeller-0.1.0.tgz

Basic Table

• BasicExample.tsx

import { Table, Row, Rows } from 'react-native-tabeller';
import { View, StyleSheet } from 'react-native';

export const BasicExample = () => {
  const tableHead: string[] = ['Name', 'Index'];
  const tableData: string[][] = [
    ['Bill Clinton', '42'],
    ['GeorgeW Bush', '43'],
    ['Barack Obama', '44'],
    ['Donald Trump', '45'],
    ['Joseph Biden', '46']
  ];
  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderWidth: 1 }}>
        <Row
          data={tableHead}
          style={styles.head}
          textStyle={styles.headText}
        />
        <Rows
          data={tableData}
          textStyle={styles.text}
        />
      </Table>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: '#fff'
  },
  head: {
    height: 44,
    backgroundColor: '#C6F3E0'
  },
  text: {
    textAlign: 'center',
    padding: 5
  },
  headText: {
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

---

Scrollable Example

• ScrollableExample.tsx

---

Sticky Column Example

• StickyColumnExample.tsx

---

Example three

• ExampleThree.tsx

---

Example Four

• ExampleFour.tsx

---

Example Five

• ExampleFive.tsx

---

SheetJS Fetch Example

• SheetJSExample.tsx

---

Properties

Table Component Properties

Prop	Type	Description	Default
style	Style	Container style for the table	null
borderStyle	Object	Table border line width and color	{ borderWidth: 0, borderColor: '#000' }
children	ReactNode	Table content	Required

TableWrapper Component Properties

Prop	Type	Description	Default
style	Style	Container style	null
borderStyle	Object	Table border line width and color	{ borderWidth: 0, borderColor: '#000' }
children	ReactNode	TableWrapper content	Required

Cell Component Properties

Prop	Type	Description	Default
data	string | number | null	Cell content	null
width	number	Cell width in pixels	null
height	number	Cell height in pixels	null
flex	number	Flex value for the cell	1 (if no width, height, or style)
style	StyleProp	Container style	null
textStyle	StyleProp	Text style for cell content	null
borderStyle	BorderStyle	Cell border line width and color	{ borderWidth: 0, borderColor: '#000' }
cellContainer	ViewProps	Props passed to the cell container	{}
onPress	(data: any) => void	Callback when cell is pressed	null
children	ReactNode	Children to render inside the cell	null

Row Component Properties

Prop	Type	Description	Default
data	Array<string | number | null>	Array of data items for each cell in the row	Required
style	StyleProp	Container style	null
widthArr	number[]	Array of widths for each cell	[]
height	number	Height for the entire row	null
flexArr	number[]	Array of flex values for each cell in the row	[]
textStyle	StyleProp	Text style applied to all cells in the row	null
borderStyle	BorderStyle	Border line width and color	{ borderWidth: 0, borderColor: '#000' }
cellTextStyle	(item: any) => StyleProp	Function to generate custom text styles for individual cells	null
onPress	(item: any) => void	Callback when a cell is pressed	null

Rows Component Properties

Prop	Type	Description	Default
data	Array<Array<string | number | null>>	2D array of data for rows and cells	Required
style	StyleProp	Container style	null
widthArr	number[]	Array of widths for each column	[]
heightArr	number[]	Array of heights for each row	[]
flexArr	number[]	Array of flex values for each column	[]
textStyle	StyleProp	Text style applied to all cells	null
borderStyle	Object	Border line width and color	{ borderWidth: 0, borderColor: '#000' }
cellTextStyle	(item: any) => StyleProp	Function to generate custom text styles for individual cells	null
onPress	(item: any) => void	Callback when a cell is pressed	null

Col Component Properties

Prop	Type	Description	Default
data	Array<string | number | null>	Array of data items for each cell in the column	Required
style	StyleProp	Container style	null
width	number	Width for the entire column	null
heightArr	number[]	Array of heights for each cell	[]
flex	number	Flex value for the column	null
textStyle	StyleProp	Text style applied to all cells in the column	null
borderStyle	BorderStyle	Border line width and color	{ borderWidth: 0, borderColor: '#000' }

Cols Component Properties

Prop	Type	Description	Default
data	Array<Array<string | number | null>>	2D array of data for columns and cells	Required
style	StyleProp	Container style	null
widthArr	number[]	Array of widths for each column	[]
heightArr	number[]	Array of heights for each cell in a column	[]
flexArr	number[]	Array of flex values for each column	[]
textStyle	StyleProp	Text style applied to all cells	null
borderStyle	Object	Border line width and color	{ borderWidth: 0, borderColor: '#000' }

StickyTable Component Properties

Prop	Type	Description	Default
data	Array<Array<string | number | null>>	Full table data including first column	Required
stickyColumnWidth	number	Width of the sticky column	Required
columnWidths	number[]	Widths for non-sticky columns	[]
style	StyleProp	Style for the container	null
cellStyle	StyleProp	Style for cells	null
textStyle	StyleProp	Text style for cell content	null
headerStyle	StyleProp	Style for header row	null
headerTextStyle	StyleProp	Text style for header cells	null
borderStyle	BorderStyle	Border style	{ borderWidth: 1, borderColor: '#000' }

---

Notice

• Col and Cols components do not support automatic height adjustment
• Use the textStyle property to set margins - avoid using padding
• If the parent element is Not Table component, specify the borderStyle

<ScrollView horizontal={true}>
  {/* add borderStyle if the parent is not a Table component */}
  <TableWrapper borderStyle={{ borderWidth: 2, borderColor: 'green' }}>
    <Cols data={data} />
  </TableWrapper>
</ScrollView>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

Apache License, Version 2.0 (ALv2)