react-native-dynamic-table-component/README.md

A customizable and dynamic table component for React Native that supports flexible layouts, dynamic column rendering, and user interactions such as sorting and filter.

# 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

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

## Basic Usage

```jsx
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

```jsx
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

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

### Disabling Filtering and Sorting

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

### Custom Filter Modal

```jsx
<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.