@coligo/react-native-table

A lightweight and customizable React Native package for creating flexible, sortable tables. Perfect for displaying structured data with support for customizable columns, headers, and cell rendering.

Features

• Sortable Columns: Easily add sorting functionality to any column.
• Customizable Headers and Cells: Render custom content for headers and cells.
• Flexible Layout: Control padding, border styles, and column widths.
• Sticky Headers: Keep headers visible during scrolling.
• Separator Customization: Customize row separators for enhanced visual structure.

Installation

npm install @coligo/react-native-table

Usage

import React from 'react';
import { Table } from '@coligo/react-native-table';

const MyTable = () => {
  const data = [
    { id: 1, name: 'John Doe', age: 28 },
    { id: 2, name: 'Jane Smith', age: 34 },
    { id: 3, name: 'Sam Wilson', age: 45 },
  ];

  const columns = [
    { label: 'ID', key: 'id', sortable: true },
    { label: 'Name', key: 'name', sortable: true },
    { label: 'Age', key: 'age', sortable: true },
  ];

  return <Table data={data} columns={columns} keyExtractor="id" stickyHeader />;
};

export default MyTable;

API Reference

Table Component

The Table component accepts the following props:

| Prop | Type | Description | | ------------------ | --------------------------- | ----------------------------------------------------------------------------------------- | | data | T[] | Array of data objects to display in the table. | | columns | Column<T>[] | Defines the columns of the table, including keys and render functions for custom content. | | keyExtractor | keyof T | Key used to uniquely identify each row. | | cellPadding | CellPadding | Optional padding for cells. See CellPadding below. | | sortingIcons | SortingIcons | Optional icons for sorting states. See SortingIcons below. | | borderStyle | BorderStyle | Optional border styles for the table. See BorderStyle below. | | style | StyleProp<ViewStyle> | Optional styling for the container view. | | stickyHeader | boolean | Enables sticky headers when set to true. | | headerBackground | ColorValue | Optional background color for the header. | | rowHeader | (rowData: T) => ReactNode | Optional render function for custom row header content. | | rowFooter | (rowData: T) => ReactNode | Optional render function for custom row footer content. |

Column Type

Each column is defined by the following properties:

| Property | Type | Description | | ---------- | --------------------------------------------- | ------------------------------------------------------ | | label | string | Column header label. | | key | keyof T | Key in the data object to display. | | id | string | Optional id that is used as key for duplicate key use. | | width | number | Optional fixed width for the column. | | flex | number | Optional flex value to proportionally size the column. | | sortable | boolean | Whether the column is sortable. | | header | (label: string) => ReactNode | Optional custom render function for the column header. | | render | (item: T[keyof T], rowData: T) => ReactNode | Optional custom render function for the cell content. |

CellPadding Type

Defines padding for cells within the table.

| Property | Type | Description | | ------------------- | -------- | ----------------------------- | | padding | number | Uniform padding for cells. | | paddingHorizontal | number | Horizontal padding for cells. | | paddingVertical | number | Vertical padding for cells. |

SortingIcons Type

Specifies icons for ascending and descending sorting states.

| Property | Type | Description | | -------- | ----------- | ------------------------------- | | asc | ReactNode | Icon for ascending sort state. | | desc | ReactNode | Icon for descending sort state. |

BorderStyle Type

Controls visibility and styling of borders within the table.

| Property | Type | Description | | ---------------------- | --------- | ----------------------------------------------------- | | showVertical | boolean | Shows vertical cell borders when true. | | showHorizontalHeader | boolean | Shows horizontal border below the header when true. | | showHorizontalBody | boolean | Shows horizontal borders between rows when true. | | borderWidth | number | Width of the borders. | | borderColor | string | Color of the borders. |

Example with Custom Cell and Header Renderers

import React from 'react';
import { Text } from 'react-native';
import { Table } from '@coligo/react-native-table';

const MyCustomTable = () => {
  const data = [
    { id: 1, name: 'John Doe', age: 28 },
    { id: 2, name: 'Jane Smith', age: 34 },
  ];

  const columns = [
    {
      label: 'Name',
      key: 'name',
      render: (item) => <Text style={{ fontWeight: 'bold' }}>{item}</Text>,
    },
    {
      label: 'Age',
      key: 'age',
      header: (label) => <Text style={{ color: 'blue' }}>{label}</Text>,
      sortable: true,
    },
  ];

  return (
    <Table
      data={data}
      columns={columns}
      keyExtractor="id"
      sortingIcons={{
        asc: <Text>🔼</Text>,
        desc: <Text>🔽</Text>,
      }}
      borderStyle={{
        showVertical: true,
        borderWidth: 1,
        borderColor: '#ccc',
      }}
      cellPadding={{
        paddingHorizontal: 10,
        paddingVertical: 5,
      }}
    />
  );
};

export default MyCustomTable;

Contributing

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

License

MIT