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

```tsx
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-tabeller';
```

## Examples

### Basic Table

<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
<img src="./assets/tabeller_scrollable_table.webp" width="340"/>

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

export const ScrollableExample = () => {
  const tableHead = ['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8'];
  const widthArr = [40, 69, 80, 100, 120, 140, 160, 180];

  // generate a large table data
  const tableData = [];
  for (let i = 0; i < 30; i += 1) {
    const rowData = [];
    for (let j = 0; j < 8; j += 1) {
      rowData.push(`${i}${j}`);
    }
    tableData.push(rowData);
  }

  return (
    <View style={styles.container}>
      <ScrollView horizontal={true}>
        <View>
          <Table borderStyle={{ borderWidth: 2, borderColor: '#00000' }}>
            <Row
              data={tableHead}
              widthArr={widthArr}
              style={styles.header}
              textStyle={styles.headerText}
            />
          </Table>
          <ScrollView style={styles.dataWrapper}>
            <Table borderStyle={{ borderWidth: 1, borderColor: '#00000' }}>
              <Rows
                data={tableData}
                widthArr={widthArr}
                style={styles.row}
                textStyle={styles.text}
              />
            </Table>
          </ScrollView>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    height: 400,
    backgroundColor: '#fff',
  },
  header: {
    height: 50,
    backgroundColor: '#C6F3E0'
  },
  headerText: {
    textAlign: 'center',
    fontWeight: 'bold'
  },
  text: {
    textAlign: 'center',
    padding: 5
  },
  dataWrapper: {
    marginTop: -1
  },
  row: {
    height: 40,
    backgroundColor: '#fff'
  }
});
```

### Example three
<img src="./assets/tabeller_example_three.webp" width="340"/>

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

export const ExampleThree = () => {
  const tableHead = ['', 'Head1', 'Head2', 'Head3'];
  const tableTitle = ['Title1', 'Title2', 'Title3'];
  const tableData = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f'],
    ['g', 'h', 'i']
  ];

  const onCellPress = (data: any) => {
    console.log(`Cell pressed: ${data}`);
  };

  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderWidth: 1 }}>
        <Row
          data={tableHead}
          style={styles.head}
          textStyle={styles.headText}
        />
        <TableWrapper style={styles.wrapper}>
          <Col
            data={tableTitle}
            style={styles.title}
            heightArr={[28, 28, 28]}
            textStyle={styles.titleText}
          />
          <Rows
            data={tableData}
            flexArr={[1, 1, 1]}
            style={styles.row}
            textStyle={styles.text}
            onPress={onCellPress}
          />
        </TableWrapper>
      </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'
  },
  row: {
    height: 40,
    backgroundColor: '#fff'
  },
  wrapper: {
    flexDirection: 'row'
  },
  title: {
    flex: 1,
    backgroundColor: '#C6F3E0'
  },
  titleText: {
    textAlign: 'left',
    marginLeft: 6,
    fontWeight: '600'
  }
});
```

### Example Four
<img src="./assets/tabeller_example_four.webp" width="340"/>

```tsx
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import { Table, TableWrapper, Row, Cell } from 'react-native-tabeller';

type TableDataType = string[][];

export const ExampleFour: React.FC = () => {
  const [tableHead] = useState<string[]>(['Head', 'Head2', 'Head3', 'Head4']);
  const [tableData] = useState<TableDataType>([
    ['1', '2', '3', '4'],
    ['a', 'b', 'c', 'd'],
    ['1', '2', '3', '4'],
    ['a', 'b', 'c', 'd']
  ]);

  const alertIndex = (index: number): void => {
    Alert.alert(`This is row ${index + 1}`);
  };

  const element = (data: any, index: number): React.ReactElement => (
    <TouchableOpacity onPress={() => alertIndex(index)}>
      <View style={styles.btn}>
        <Text style={styles.btnText}>button</Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderColor: 'transparent' }}>
        <Row data={tableHead} style={styles.head} textStyle={styles.text} />
        {
          tableData.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {
                rowData.map((cellData, cellIndex) => (
                  <Cell
                    key={cellIndex}
                    data={cellIndex === 3 ? element(cellData, index) : cellData}
                    textStyle={styles.text}
                  />
                ))
              }
            </TableWrapper>
          ))
        }
      </Table>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#C6F3E0' },
  text: { margin: 8 },
  row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
  btn: { width: 58, height: 18, backgroundColor: '#78B7BB', borderRadius: 2 },
  btnText: { textAlign: 'center', color: '#fff' }
});

export default ExampleFour;
```

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

```tsx
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
import { Table, TableWrapper, Row, Col, Rows } from 'react-native-tabeller';

export const ExampleFive: React.FC = () => {
    const alertIndex = (value: string): void => {
        Alert.alert(`This is column ${value}`);
    };

    const elementButton = (value: string): React.ReactElement => (
        <TouchableOpacity onPress={() => alertIndex(value)}>
            <View style={styles.btn}>
                <Text style={styles.btnText}>button</Text>
            </View>
        </TouchableOpacity>
    );

    const [tableHead] = useState<any[]>(['', elementButton('1'), elementButton('2'), elementButton('3')]);
    const [sideHead] = useState<string[]>(['H1', 'H2']);
    const [rowTitles] = useState<string[]>(['Title', 'Title2', 'Title3', 'Title4']);

    // Table data - matching the structure in the screenshot
    const [tableData] = useState<string[][]>([
        ['a', '1', 'a'],
        ['b', '2', 'b'],
        ['c', '3', 'c'],
        ['d', '4', 'd']
    ]);

    return (
        <View style={styles.container}>
            <Table borderStyle={{ borderWidth: 1, borderColor: '#C1C0B9' }}>
                {/* table header row with buttons */}
                <Row
                    data={tableHead}
                    style={styles.header}
                    textStyle={styles.headerText}
                    flexArr={[1, 1, 1, 1]}
                />

                <TableWrapper style={styles.wrapper}>
                    {/* left column with H1, H2 */}
                    <Col
                        data={sideHead}
                        style={styles.sideHeader}
                        heightArr={[60, 60]}
                        textStyle={styles.sideHeaderText}
                    />

                    <TableWrapper style={styles.tableContentWrapper}>
                        {/* row titles column */}
                        <Col
                            data={rowTitles}
                            style={styles.title}
                            heightArr={[30, 30, 30, 30]}
                            textStyle={styles.titleText}
                        />

                        {/* content cells */}
                        <Rows
                            data={tableData}
                            style={styles.row}
                            flexArr={[1, 1, 1]}
                            textStyle={styles.text}
                        />
                    </TableWrapper>
                </TableWrapper>
            </Table>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 16,
        paddingTop: 30,
        backgroundColor: '#fff'
    },
    header: {
        height: 40,
        backgroundColor: '#fff'
    },
    headerText: {
        textAlign: 'center',
        fontWeight: '500'
    },
    wrapper: {
        flexDirection: 'row'
    },
    sideHeader: {
        width: 60,
        backgroundColor: '#C6F3E0'
    },
    sideHeaderText: {
        textAlign: 'center',
        fontWeight: '500'
    },
    tableContentWrapper: {
        flex: 1,
        flexDirection: 'row'
    },
    title: {
        width: 80,
        backgroundColor: '#f6f8fa'
    },
    titleText: {
        textAlign: 'left',
        paddingLeft: 5
    },
    row: {
        height: 30
    },
    text: {
        textAlign: 'center'
    },
    btn: {
        width: 58,
        height: 18,
        backgroundColor: '#c8e1ff',
        borderRadius: 2,
        alignSelf: 'center'
    },
    btnText: {
        textAlign: 'center',
        fontSize: 12
    }
});

export default ExampleFive;
```

---

<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** | Style | Container style | `null` |
| **textStyle** | Style | Text style for cell content | `null` |
| **borderStyle** | Object | Cell border line width and color | `{ borderWidth: 0, borderColor: '#000' }` |
| **cellContainerProps** | ViewProps | Props passed to the cell container | `{}` |
| **onPress** | Function | 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** | Style | 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** | Style | Text style applied to all cells in the row | `null` |
| **borderStyle** | Object | Border line width and color | `{ borderWidth: 0, borderColor: '#000' }` |
| **cellTextStyle** | Function | Function to generate custom text styles for individual cells | `null` |
| **onPress** | Function | 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** | Style | 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** | Style | Text style applied to all cells | `null` |
| **borderStyle** | Object | Border line width and color | `{ borderWidth: 0, borderColor: '#000' }` |
| **onPress** | Function | 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** | Style | 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** | Style | Text style applied to all cells in the column | `null` |
| **borderStyle** | Object | 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** | Style | 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** | Style | 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** | Style | Style for the container | `null` |
| **cellStyle** | Style | Style for cells | `null` |
| **textStyle** | Style | Text style for cell content | `null` |
| **headerStyle** | Style | Style for header row | `null` |
| **headerTextStyle** | Style | Text style for header cells | `null` |
| **borderStyle** | Object | 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)