@ankit628792/react-native-table

A dynamic and customizable React Native table component with sorting, filtering, and drag-and-drop functionality. This package provides a powerful and flexible table solution for React Native applications.

Features

• 📊 Dynamic Data: Handle any data structure with TypeScript support
• 🔄 Sorting: Built-in sorting with custom sort functions
• 🎨 Customizable: Fully customizable styles and layouts
• 📱 Responsive: Automatically adapts to different screen sizes
• ⚡ Performance: Optimized for large datasets
• 🎯 Drag & Drop: Reorder rows with drag-and-drop functionality
• 🎨 Loading States: Built-in loading component
• 📝 Empty States: Customizable empty state handling
• 🔧 TypeScript: Full TypeScript definitions included

Installation

npm install @ankit628792/react-native-table
# or
yarn add @ankit628792/react-native-table

Dependencies

This package requires the following peer dependencies:

• react >= 16.8.0
• react-native >= 0.60.0

And the following dependencies:

• react-native-draggable-flatlist >= 4.0.1
• react-native-svg >= 13.9.0
• react-native-device-info >= 10.8.0

Usage

Basic Example

import React from 'react';
import { View, Text } from 'react-native';
import { DynamicTable } from '@ankit628792/react-native-table';

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

const MyComponent = () => {
  const data: User[] = [
    { id: 1, name: 'John Doe', email: '[email protected]', age: 25 },
    { id: 2, name: 'Jane Smith', email: '[email protected]', age: 30 },
    { id: 3, name: 'Bob Johnson', email: '[email protected]', age: 28 },
  ];

  const columns = [
    { key: 'name', label: 'Name', flex: 2 },
    { key: 'email', label: 'Email', flex: 3 },
    { key: 'age', label: 'Age', flex: 1 },
  ];

  return (
    <View style={{ flex: 1 }}>
      <DynamicTable
        data={data}
        columns={columns}
        onRowPress={(item) => console.log('Row pressed:', item)}
      />
    </View>
  );
};

export default MyComponent;

Advanced Example with Custom Styling

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { DynamicTable } from '@ankit628792/react-native-table';

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
  stock: number;
}

const AdvancedExample = () => {
  const data: Product[] = [
    { id: 1, name: 'Laptop', price: 999.99, category: 'Electronics', stock: 10 },
    { id: 2, name: 'Phone', price: 699.99, category: 'Electronics', stock: 25 },
    { id: 3, name: 'Book', price: 19.99, category: 'Books', stock: 100 },
  ];

  const columns = [
    {
      key: 'name',
      label: 'Product Name',
      flex: 2,
      sortable: true,
      formatter: (value, item) => (
        <Text style={styles.productName}>{value}</Text>
      ),
    },
    {
      key: 'price',
      label: 'Price',
      flex: 1,
      sortable: true,
      formatter: (value) => (
        <Text style={styles.price}>${value}</Text>
      ),
    },
    {
      key: 'category',
      label: 'Category',
      flex: 1,
      sortable: true,
    },
    {
      key: 'stock',
      label: 'Stock',
      flex: 1,
      sortable: true,
      formatter: (value) => (
        <Text style={[styles.stock, value < 20 && styles.lowStock]}>
          {value}
        </Text>
      ),
    },
  ];

  return (
    <View style={styles.container}>
      <DynamicTable
        data={data}
        columns={columns}
        customStyles={{
          headerRow: styles.headerRow,
          headerText: styles.headerText,
          row: styles.row,
          cell: styles.cell,
        }}
        onRowPress={(item) => console.log('Product selected:', item)}
        emptyPlaceholder="No products available"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  headerRow: {
    backgroundColor: '#f8f9fa',
    borderBottomWidth: 2,
    borderBottomColor: '#dee2e6',
  },
  headerText: {
    fontWeight: 'bold',
    color: '#495057',
  },
  row: {
    borderBottomWidth: 1,
    borderBottomColor: '#e9ecef',
  },
  cell: {
    paddingVertical: 12,
    paddingHorizontal: 8,
  },
  productName: {
    fontWeight: '600',
    color: '#212529',
  },
  price: {
    color: '#28a745',
    fontWeight: '600',
  },
  stock: {
    textAlign: 'center',
    fontWeight: '500',
  },
  lowStock: {
    color: '#dc3545',
  },
});

Drag and Drop Example

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { DynamicTable } from '@ankit628792/react-native-table';

interface Task {
  id: number;
  title: string;
  priority: string;
  status: string;
}

const DragDropExample = () => {
  const [data, setData] = useState<Task[]>([
    { id: 1, title: 'Task 1', priority: 'High', status: 'Pending' },
    { id: 2, title: 'Task 2', priority: 'Medium', status: 'In Progress' },
    { id: 3, title: 'Task 3', priority: 'Low', status: 'Completed' },
  ]);

  const columns = [
    { key: 'title', label: 'Task', flex: 2 },
    { key: 'priority', label: 'Priority', flex: 1 },
    { key: 'status', label: 'Status', flex: 1 },
  ];

  return (
    <View style={{ flex: 1 }}>
      <DynamicTable
        data={data}
        columns={columns}
        draggable={true}
        onRowPress={(item) => console.log('Task selected:', item)}
      />
    </View>
  );
};

API Reference

DynamicTable Props

interface DynamicTableProps<T> {
  data?: T[];                    // Array of data to display
  columns: Column<T>[];          // Column definitions
  customStyles?: CustomStyle;     // Custom styles
  emptyPlaceholder?: string;      // Text to show when no data
  selectedRow?: string | number;  // Currently selected row
  onRowPress?: (data: T) => void; // Row press handler
  draggable?: boolean;           // Enable drag and drop
  loading?: boolean;             // Show loading state
}

Column Definition

interface Column<T> {
  key: keyof T;                  // Data key
  label: string;                 // Column header
  sortable?: boolean;            // Enable sorting
  customSort?: (props: {         // Custom sort function
    data: T[];
    direction: 'ASC' | 'DESC';
    sortKey: keyof T;
  }) => void;
  formatter?: (                  // Custom cell renderer
    value: T[keyof T],
    item: T,
    index: number,
  ) => JSX.Element;
  headerFormatter?: (            // Custom header renderer
    label: string
  ) => JSX.Element;
  flex?: number;                 // Column flex value
  minWidth?: number;             // Minimum column width
  onCellPress?: (data: T) => void; // Cell press handler
  style?: StyleProp<ViewStyle>;  // Cell style
  headerStyle?: StyleProp<ViewStyle>; // Header style
  headerText?: StyleProp<TextStyle>; // Header text style
  onHeaderPress?: (e: GestureResponderEvent) => void; // Header press
  cellText?: StyleProp<TextStyle>; // Cell text style
  customHeaderIcon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>; // Custom header icon
  placeholder?: string | number;  // Placeholder value
}

Custom Styles

interface CustomStyle {
  row?: StyleProp<ViewStyle>;
  headerCell?: StyleProp<ViewStyle>;
  headerText?: StyleProp<TextStyle>;
  headerRow?: StyleProp<ViewStyle>;
  container?: StyleProp<ViewStyle>;
  cell?: StyleProp<ViewStyle>;
  cellText?: StyleProp<TextStyle>;
}

Types

// Export all types
export type {
  Column,
  CustomStyle,
  DynamicTableProps,
} from '@ankit628792/react-native-table';

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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