react-native-tabeller/README.md

<h1 align="center">React Native Tabeller</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/react-native-reanimated-table"><img src="https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg" /></a>
</p>

This is a table component for react native.

- [Installation](#installation)
- [Examples](#examples)
- [Properties](#properties)
- [Notice](#notice)
- [License](#license)

### Demos
- [iOS](https://youtube.com/shorts/olLZj2ppGBY)

## Installation

```sh
npm install https://git.sheetjs.com/asadbek064/react-native-tabeller/raw/branch/main/react-native-tabeller-0.1.0.tgz
```

### Basic Table
- [`BasicExample.tsx`](./example/src/BasicExample.tsx)

<img src="./assets/tabeller_basic_table.png" width="340"/>

```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`](./example/src/ScrollableExample.tsx)

<img src="./assets/tabeller_scrollable_table.png" width="340"/>

---

### Sticky Column Example

- [`StickyColumnExample.tsx`](./example/src/StickyColumnExample.tsx)

<img src="./assets/tabeller_scrollable_sticky_1st_column.webp" width="340"/>

---

### Example three

- [`ExampleThree.tsx`](./example/src/ExampleThree.tsx)

<img src="./assets/tabeller_example_three.png" width="340"/>

---

### Example Four

- [`ExampleFour.tsx`](./example/src/ExampleFour.tsx)

<img src="./assets/tabeller_example_four.png" width="340"/>

---

### Example Five

- [`ExampleFive.tsx`](./example/src/ExampleFive.tsx)

<img src="./assets/tabeller_example_five.png" width="340"/>

---

### SheetJS Fetch Example

- [`SheetJSExample.tsx`](./example/src/SheetJSExample.tsx)

<img src="./assets/tabeller_sheetjs_fetch_example.png" width="500"/>

---

<br/><br/>


## 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<ViewStyle> | Container style | `null` |
| **textStyle** | StyleProp<TextStyle> | 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<ViewStyle> | 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<TextStyle> | 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<TextStyle> | 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<ViewStyle> | 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<TextStyle> | Text style applied to all cells | `null` |
| **borderStyle** | Object | Border line width and color | `{ borderWidth: 0, borderColor: '#000' }` |
| **cellTextStyle** | (item: any) => StyleProp<TextStyle> | 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<ViewStyle> | 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<TextStyle> | 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<ViewStyle> | 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<TextStyle> | 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<ViewStyle> | Style for the container | `null` |
| **cellStyle** | StyleProp<ViewStyle> | Style for cells | `null` |
| **textStyle** | StyleProp<TextStyle> | Text style for cell content | `null` |
| **headerStyle** | StyleProp<ViewStyle> | Style for header row | `null` |
| **headerTextStyle** | StyleProp<TextStyle> | Text style for header cells | `null` |
| **borderStyle** | BorderStyle | Border style | `{ borderWidth: 1, borderColor: '#000' }` |
---



<br/><br/>

## 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`

```tsx
<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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

Apache License, Version 2.0 [(ALv2)](LICENSE)