@joharkhan/react-native-table NPM

React Native Table

A highly customizable table component for React Native with support for custom cell rendering, filtering, sorting, pagination, and more.

Features

Custom Cell Rendering: Render any type of data or component inside the table cells.
Filtering: Filter rows based on column values. (under development)
Sorting: Sort the table data by columns. (under development)
Pagination: Paginate data to handle large datasets efficiently.
Customizable Styles: Easily customize the table's appearance.
Responsive Design: Adapt the table layout for different screen sizes.

Installation

To install the package, run the following command:

npm install @joharkhan/react-native-table

or if you're using Yarn:

yarn add @joharkhan/react-native-table

Usage

After installing the package, you can import and use the table component in your project like this:

import React from 'react';
import ReactNativeTable from '@joharkhan/react-native-table';
import { Image, Text, TouchableOpacity, View } from 'react-native';

const Example = () => {
  const columns = [
    {
      key: 1,
      dataIndex: 'rank',
      headerName: 'Ranking',
      width: 100,
    },
    {
      key: 2,
      dataIndex: 'name',
      headerName: 'Name',
      width: 100,
    },
    {
      key: 3,
      dataIndex: 'country',
      headerName: 'Country',
      width: 150,
      cellRenderer: (rowData: any) => {
        return (
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              columnGap: 2,
            }}
          >
            <Image
              source={{ uri: rowData.flagIcon }}
              style={{ width: 30, height: 20, borderRadius: 2 }}
              resizeMode="contain"
            />
            <Text>{rowData.country}</Text>
          </View>
        );
      },
    },
    {
      key: 4,
      dataIndex: 'language',
      headerName: 'Language',
      width: 100,
    },
    {
      key: 5,
      dataIndex: 'gameName',
      headerName: 'Game Name',
      width: 150,
      cellRenderer: (rowData: any) => <Text style={{ fontWeight: 600 }}>{rowData.gameName}</Text>,
    },
    {
      key: 6,
      dataIndex: 'actionButtons',
      headerName: 'Actions',
      isHeaderNameHidden: true,
      width: 150,
      cellRenderer: (rowData: any) => {
        return (
          <View
            style={{
              flexDirection: 'row',
              columnGap: 3,
              alignItems: 'center',
            }}
          >
            <TouchableOpacity
              style={{
                backgroundColor: 'green',
                padding: 2,
                borderRadius: 5,
                paddingHorizontal: 10,
              }}
            >
              <Text
                style={{
                  color: 'white',
                }}
              >
                Yes
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{
                backgroundColor: 'red',
                padding: 2,
                borderRadius: 5,
                paddingHorizontal: 10,
              }}
            >
              <Text
                style={{
                  color: 'white',
                }}
              >
                No
              </Text>
            </TouchableOpacity>
          </View>
        );
      },
    },
  ];

  const data = [
    {
      key: 1,
      name: 'Alice',
      language: 'English',
      country: 'United States',
      flagIcon: 'https://flagcdn.com/w320/us.png',
      gameName: 'Chess',
      rank: 5,
    },
    {
      key: 2,
      name: 'Bob',
      language: 'Spanish',
      country: 'Spain',
      flagIcon: 'https://flagcdn.com/w320/es.png',
      gameName: 'Football',
      rank: 2,
    },
    {
      key: 3,
      name: 'Charlie',
      language: 'French',
      country: 'France',
      flagIcon: 'https://flagcdn.com/w320/fr.png',
      gameName: 'Tennis',
      rank: 8,
    },
    {
      key: 4,
      name: 'David',
      language: 'German',
      country: 'Germany',
      flagIcon: 'https://flagcdn.com/w320/de.png',
      gameName: 'Basketball',
      rank: 4,
    },
    {
      key: 5,
      name: 'Eve',
      language: 'Italian',
      country: 'Italy',
      flagIcon: 'https://flagcdn.com/w320/it.png',
      gameName: 'Volleyball',
      rank: 7,
    },
    {
      key: 6,
      name: 'Frank',
      language: 'Japanese',
      country: 'Japan',
      flagIcon: 'https://flagcdn.com/w320/jp.png',
      gameName: 'Karate',
      rank: 1,
    },
    {
      key: 7,
      name: 'Grace',
      language: 'Mandarin',
      country: 'China',
      flagIcon: 'https://flagcdn.com/w320/cn.png',
      gameName: 'Table Tennis',
      rank: 3,
    },
    {
      key: 8,
      name: 'Hank',
      language: 'Korean',
      country: 'South Korea',
      flagIcon: 'https://flagcdn.com/w320/kr.png',
      gameName: 'Taekwondo',
      rank: 9,
    },
    {
      key: 9,
      name: 'Ivy',
      language: 'Russian',
      country: 'Russia',
      flagIcon: 'https://flagcdn.com/w320/ru.png',
      gameName: 'Ice Hockey',
      rank: 6,
    },
    // ...more rows
  ];

  return <ReactNativeTable data={data} columns={columns} pageSize={7} />;
};

Example File

You can find an example file in the examples folder. This example demonstrates how to use the table component in a React Native application with sample data, column definitions, and styles.

Props Explanation

The table component provides several props to customize its behavior and appearance. Below is a detailed explanation of each prop:

Prop	Type	Required	Description
`columns`	`ReactNativeTableColumn[]`	Yes	Defines the structure of the table columns, including header names, data fields, widths, and custom renderers.
`data`	`ReactNativeTableRowData[]`	Yes	The data to be displayed in the table. Each object represents a row, and its keys must match the `dataIndex` of the columns.
`pageSize`	`number`	No	Specifies the number of rows to display per page for pagination. Default is `10`.
`paginationOptions`	`PaginationOptions`	No	Customizes the appearance and behavior of pagination controls, including their position and icons.
`tableBorder`	`{ width?: number; color?: string; borderRadius?: number; style?: 'solid' \\| 'dotted' \\| 'dashed' }`	No	Defines the border style for the table, including width, color, and style. Default is no border.
`rowVerticalPadding`	`number`	No	Sets the vertical padding for each row in the table. Default is `5`.

Column Definition (`ReactNativeTableColumn`)

Property	Type	Required	Description
`dataIndex`	`string`	Yes	The key in the row data object to be displayed in this column.
`headerName`	`string`	Yes	The name to be displayed as the column header.
`key`	`string \\| number`	Yes	A unique key for the column, used for React rendering optimizations.
`width`	`number`	No	The width of the column in pixels. Default is `100`.
`cellRenderer`	`(rowData: any) => React.ReactNode`	No	A function to render custom content in the cell. Receives the row data as an argument.
`isHeaderNameHidden`	`boolean`	No	Hides the column header name if set to `true`. Default is `false`.

Row Data Definition (`ReactNativeTableRowData`)

Property	Type	Required	Description
`key`	`string \\| number`	Yes	A unique identifier for each row in the table. This key is used to differentiate rows.
`[key: string]: any`	`Any`	No	Custom data fields that correspond to the `dataIndex` values defined in the `columns` prop. Allows for dynamic row content.

Pagination Options (`PaginationOptions`)

Property	Type	Required	Description
`position`	`'center' \\| 'flex-start' \\| 'flex-end' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'`	No	Defines the alignment of the pagination controls within the table footer.
`nextButtonIcon`	`React.ReactNode \\| string`	No	A custom icon or text to use for the "Next" button. Defaults to a right arrow text if not specified.
`previousButtonIcon`	`React.ReactNode \\| string`	No	A custom icon or text to use for the "Previous" button. Defaults to a left arrow text if not specified.
`siblingCount`	`number`	No	The number of page buttons to display on each side of the current page button in the pagination control.

Contributing

We welcome contributions to improve this project! If you'd like to contribute, please follow these steps:

Fork the repository to your own GitHub account.
Clone your forked repository to your local machine.
Create a new branch for your feature or bug fix.
```
git checkout -b feature/my-feature
```
Make your changes in the new branch.
Push your changes to your forked repository.
```
git push origin -u feature/my-feature
```
Open a pull request on GitHub with a description of what you've done. If you worked on a specific issue, please mention the issue number in the description.

For more detailed contributing guidelines, please refer to the CONTRIBUTING.md file.