React Native Smart DataTable 📊

A powerful, customizable React Native smart table component with support for:

✅ Sorting
✅ Column visibility
✅ Custom cell rendering
✅ Search
✅ Pagination
✅ Row selection via checkboxes

🔧 Installation

1npm install react-native-smart-data-table
2
3📐 Column Type
4
5type Column = {
6  key: string;
7  title: string;
8  sortable?: boolean;
9  align?: 'left' | 'center' | 'right';
10  width?: number;
11  numberOfLines?: number;
12  scrollable?: { h?: boolean; v?: boolean };
13};
14
15
16
17## 🚀 Usage
18
19import { DataTable, Column } from 'react-native-smart-data-table';
20import React, { useState } from 'react';
21import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
22
23interface UserRow {
24    id: number;
25    name: string;
26    age: number;
27    dob: string;
28    address: string;
29    email: string;
30    description: string;
31}
32
33
34const columns: Column[] = [
35    { key: 'id', title: 'ID', sortable: true },
36    { key: '__image', title: 'Image' },
37    { key: 'name', title: 'Name', sortable: true, width: 150 },
38    { key: 'age', title: 'Age', sortable: true, },
39    { key: 'dob', title: 'DOB', sortable: true, width: 130 },
40    { key: 'address', title: 'Address', sortable: false, width: 100 },
41    { key: 'email', title: 'Email', sortable: false, width: 200 },
42    { key: 'description', title: 'Description',align:"left", sortable: false, width: 200,scrollable:{v:true, h:true} },
43    { key: '__actions', title: 'Actions', align: 'right' },
44];
45
46
47const data: UserRow[] = [
48    { id: 1, image: "https://watchlytics.s3.eu-west-2.amazonaws.com/static/images/bird-thumbnail_jOblOE2.jpg", name: 'Muhammad Bilal', age: 24, dob: '1999-04-15', address: '123 Main', email: 'bilal.kalri@gmail.com', description: "description" },
49    {
50        id: 2, image: "https://watchlytics.s3.eu-west-2.amazonaws.com/static/images/bird-thumbnail_jOblOE2.jpg", name: 'Bob', age: 30, dob: '1995-08-22', address: '456 Elm', email: 'bob@x.com', description: `Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor` },
51]
52
53const arrow = (dir: 'asc' | 'desc' | undefined) => {
54    if (dir === 'asc') return <Text style={{ marginLeft: 4 }}>🔼</Text>;
55    if (dir === 'desc') return <Text style={{ marginLeft: 4 }}>🔽</Text>;
56    return null;
57};
58
59const renderCell = (row: UserRow, column: Column) => {
60    if (column.key === '__actions') {
61        return (
62            <View style={{ flexDirection: 'row', gap: 8 }}>
63                <TouchableOpacity onPress={() => console.log('Edit', row.id)}>
64                    <Text style={{ color: '#1a73e8' }}>Edit</Text>
65                </TouchableOpacity>
66                <TouchableOpacity onPress={() => console.log('Delete', row.id)}>
67                    <Text style={{ color: '#d93025' }}>Delete</Text>
68                </TouchableOpacity>
69            </View>
70        );
71    }
72
73    return undefined;
74};
75
76const Table = () => {
77    const [page, setPage] = useState(1);
78    return (
79        <View style={styles.container}>
80            <DataTable<UserRow>
81                    data={data}
82                    columns={columns}
83                    isCheckBox
84                    sortIcon={arrow}
85                    renderCell={renderCell}
86                    pagination={true}
87                    totalPages={23}
88                    onPageChange={(page) => setPage(page)}
89                    onSelectionChange={(val) => console.log(val)}
90                    page={page}
91                    searchAble
92                />
93        </View>
94    )
95};
96
97const styles = StyleSheet.create({
98    container: { marginTop: 30, flex: 1, marginBottom: 30, backgroundColor: '#fff', margin: "auto", borderRadius: 5 },
99});
100
101export default Table;
102
103
104## 📚 Props
105
106| Prop                | Type                                               | Description                                                     |
107| ------------------- | -------------------------------------------------- | --------------------------------------------------------------- |
108| data              | Row[]                                            | Array of row objects (each row must have a unique `id`).        |
109| columns           | Column[]                                         | Defines the table structure (title, key, sortable, width, etc). |
110| isCheckBox        | boolean                                          | Enables row selection with checkboxes.                          |
111| searchAble        | boolean                                          | Enables a search input above the table.                         |
112| columnsVisibility | string[]                                         | Keys of columns to be shown (hides others).                     |
113| renderCell        | (row: Row, column: Column) => ReactNode          | Render custom content for a specific cell.                      |
114| sortIcon          | (dir: 'asc' | 'desc' | undefined) => ReactNode   | Optional custom sort icon renderer.                             |
115| styles            | DataTableStyles                                  | Customize table styles (header, row, checkbox, etc).            |
116| pagination        | boolean                                          | Show pagination controls below the table.                       |
117| page              | number                                           | Current page number.                                            |
118| totalPages        | number                                           | Total number of pages.                                          |
119| onPageChange      | (page: number) => void                           | Callback triggered when the page changes.                       |
120| paginationVariant | "classic" | "basic"                              | Style of pagination control (classic = full, basic = compact) default basic.  |
121| onSelectionChange | (selectedIds: number[]) => void                  | Callback with selected row IDs when selection changes.          |
122|scrollable	{ h?: boolean, v?: boolean }	                           |Optional. Enables horizontal and/or vertical scrolling for the cell content of the column. |