rn-data-table

A performant, horizontally-scrollable React Native data table with:

• 📌 Sticky columns — pin any column to the left while the rest scroll horizontally
• 🌲 Nested / expandable rows — tree-structured data with chevron expand/collapse
• ➕ Totals footer row — display summed columns below the data with a bold highlighted row
• ♻️ Pull-to-refresh and infinite scroll (pagination)
• 🎨 Fully themeable — supply your own colors and font families via a single theme prop
• ⚡ Single animated style for the sticky overlay, regardless of row count

Installation

npm install rn-data-table
# or
yarn add rn-data-table

Peer dependencies

npm install react-native-gesture-handler react-native-reanimated

Follow the setup guides for each:

• react-native-gesture-handler
• react-native-reanimated

Basic usage

import DataTable from 'rn-data-table';

const columns = [
  { key: 'name',   title: 'Name',   width: 140, sticky: true },
  { key: 'date',   title: 'Date',   width: 100 },
  { key: 'amount', title: 'Amount', width: 90  },
];

const data = [
  { name: 'Alice', date: '2082-01-21', amount: 500 },
  { name: 'Bob',   date: '2082-01-22', amount: 300 },
];

export default function MyScreen() {
  return (
    <DataTable
      columns={columns}
      data={data}
      totals={{ amount: 800 }}
    />
  );
}

Props

Prop	Type	Default	Description
columns	Column[]	required	Column definitions
data	any[]	required	Row data
totals	Record<string, string | number>	—	Values to show in the Total footer row
nestedKey	string	—	Object key that holds child rows
onPressRow	(row) => void	—	Tap handler for a data row
onLoadMore	() => void	—	Called when scrolled near the bottom
hasNextPage	boolean	—	Controls whether onLoadMore fires
isLoading	boolean	false	Shows a full-table spinner
isFetchingMore	boolean	false	Shows a footer spinner
onRefresh	() => void	—	Pull-to-refresh handler
refreshing	boolean	false	Pull-to-refresh state
emptyText	string	"No data available"	Empty state message
keyExtractor	(item, index) => string	—	Custom row key
theme	Partial<DataTableTheme>	Light palette	Visual theme (see below)

Column

type Column = {
  key: string;       // matches a key in your data objects
  title: string;     // displayed in the header
  width: number;     // fixed pixel width
  sticky?: boolean;  // pin to the left
};

DataTableTheme

interface DataTableTheme {
  text: string;          // cell text
  subText: string;       // header / empty state text
  background: string;    // even-row background
  background2: string;   // sticky header / odd-row / total row background
  backgroundDark: string;// alternate row tint
  border: string;        // separator color
  accent: string;        // spinner / loader color
  fontRegular?: string;  // fontFamily strings (optional — use system fonts if omitted)
  fontMedium?: string;
  fontSemiBold?: string;
  fontBold?: string;
}

Theming example (dark mode)

<DataTable
  columns={columns}
  data={data}
  theme={{
    text: '#F9FAFB',
    subText: '#9CA3AF',
    background: '#111827',
    background2: '#1F2937',
    backgroundDark: '#1a2232',
    border: '#374151',
    accent: '#818CF8',
    fontMedium: 'Inter_500Medium',
    fontSemiBold: 'Inter_600SemiBold',
    fontBold: 'Inter_700Bold',
  }}
/>

Nested rows

const data = [
  {
    name: 'Fee Income',
    amount: 1500,
    children: [
      { name: 'Tuition', amount: 1000 },
      { name: 'Transport', amount: 500 },
    ],
  },
];

<DataTable columns={columns} data={data} nestedKey="children" />

Special row types

Rows with _type: "section" or _type: "total" automatically render in bold.

License

MIT