@coligo/react-native-table NPM

@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

9 months ago

1 year ago

1 year ago

1 year ago