react-native-dynamic-table-component

DynamicTable for React Native

A flexible and feature-rich table component for React Native applications that supports filtering, sorting, searching, and customizable styling.

Features

• 📊 Dynamic Column Detection: Automatically detects columns from your data
• 🔍 Searchable: Built-in search functionality across all columns
• 🔄 Sortable: Sort by any column with ascending/descending toggle
• 🔢 Smart Filtering: Different filter types for text and numeric data
• 📱 Mobile Optimized: Horizontal scrolling with synchronized header
• 🎨 Highly Customizable: Extensive styling options for all components
• ⚡ Performance Optimized: Uses virtualized lists for efficient rendering

Installation

npm install react-native-dynamic-table-component
# or
yarn add react-native-dynamic-table-component

Basic Usage

import React from 'react';
import { View } from 'react-native';
import DynamicTable from 'react-native-dynamic-table-component';

const App = () => {
  const data = [
    { id: 1, name: 'John Doe', age: 28, department: 'Engineering' },
    { id: 2, name: 'Jane Smith', age: 34, department: 'Marketing' },
    { id: 3, name: 'Bob Johnson', age: 45, department: 'Finance' },
    // ... more data
  ];

  return (
    <View style={{ flex: 1 }}>
      <DynamicTable initialData={data} />
    </View>
  );
};

export default App;

Props

Core Props

Prop	Type	Default	Description
initialData	Array<Object>	[]	The data to be displayed in the table. Each object must have an id field.
isFilter	boolean	true	Whether to show the filter button and functionality.
sortByColumn	boolean	true	Whether columns can be clicked to sort data.
isSearch	boolean	true	Whether to show the search input.
ignoredHeaders	string[]	[]	Column keys to exclude from the table.
contentPaddingBottom	number	120	Bottom padding for the table content.
emptyMessage	string	'No results found'	Message to display when no data matches current filters/search.
filterTitle	string	'Filter'	Title for the filter modal.
showApplyButton	boolean	true	Whether to show the Apply button in filter modal.

Style Props

Prop	Type	Description
cellStyle	ViewStyle	Style for table cells.
headerStyle	ViewStyle	Style for header cells.
filterButtonStyle	ViewStyle	Style for the filter button.
filterButtonTextStyle	TextStyle	Style for the filter button text.
filterContainerStyle	ViewStyle	Style for the filter modal container.
filterContainerApplyButtonStyle	ViewStyle	Style for the Apply button in filter modal.
filterContainerApplyButtonTextStyle	TextStyle	Style for the Apply button text.
filterContainerResetButtonStyle	ViewStyle	Style for the Reset button in filter modal.
filterContainerResetButtonTextStyle	TextStyle	Style for the Reset button text.
activeTabButtonColor	string	Color for the active filter tab.
filterContainerFieldOptionStyle	ViewStyle	Style for filter field options.
filterContainerFieldOptionTextStyle	TextStyle	Style for filter field option text.
filterContainerFieldOptionActiveTextStyle	string	Color for active filter field option text.
filterContainerValueOptionStyle	ViewStyle	Style for filter value options.
filterContainerValueOptionTextStyle	TextStyle	Style for filter value option text.
filterContainerValueOptionActiveTextStyle	string	Color for active filter value option text.

Examples

Custom Styling

import React from 'react';
import { View } from 'react-native';
import DynamicTable from 'react-native-dynamic-table-component';

const App = () => {
  const data = [
    { id: 1, name: 'John Doe', age: 28, department: 'Engineering' },
    { id: 2, name: 'Jane Smith', age: 34, department: 'Marketing' },
    // ... more data
  ];

  return (
    <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
      <DynamicTable 
        initialData={data}
        cellStyle={{ backgroundColor: 'white', borderRadius: 4, margin: 2 }}
        headerStyle={{ backgroundColor: '#e0e0ff', borderRadius: 4 }}
        filterButtonStyle={{ backgroundColor: '#4a6da7', borderRadius: 20, paddingHorizontal: 15 }}
        filterButtonTextStyle={{ color: 'white', fontWeight: 'bold' }}
        activeTabButtonColor="#4a6da7"
      />
    </View>
  );
};

Hiding Specific Columns

<DynamicTable 
  initialData={data}
  ignoredHeaders={['id', 'createdAt']} // These fields won't be displayed
/>

Disabling Filtering and Sorting

<DynamicTable 
  initialData={data}
  isFilter={false}
  sortByColumn={false}
/>

Custom Filter Modal

<DynamicTable 
  initialData={data}
  filterTitle="Advanced Filters"
  filterContainerStyle={{ 
    backgroundColor: '#f0f8ff', 
    borderTopLeftRadius: 20, 
    borderTopRightRadius: 20 
  }}
  filterContainerApplyButtonStyle={{
    backgroundColor: '#4CAF50',
    paddingVertical: 12,
    paddingHorizontal: 25,
    borderRadius: 25
  }}
  filterContainerApplyButtonTextStyle={{
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16
  }}
  filterContainerResetButtonStyle={{
    backgroundColor: '#f44336',
    paddingVertical: 12,
    paddingHorizontal: 25,
    borderRadius: 25
  }}
  filterContainerResetButtonTextStyle={{
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16
  }}
/>

Filtering

The DynamicTable component provides smart filtering:

• Text fields: Show a list of unique values to select from
• Numeric fields: Provide min/max range inputs for numeric filtering

Performance Tips

For large datasets, consider these optimizations:

1. Use ignoredHeaders to hide unnecessary columns
2. Consider paginating your data if you have thousands of rows
3. Implement server-side sorting and filtering for very large datasets

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.