Custom Table

A highly customizable and feature-rich table widget for Flutter applications. This package provides an advanced data table solution with support for hierarchical data, accordion-style expansion, column freezing, sorting, selection, and more.

Example Prototype

_{Example: Interactive table with sorting, selection, tree expansion, and column freezing}

Features

✨ Rich Data Display

• Customizable table cells with text or widget content
• Flexible column configuration with custom widths
• Professional header and body styling options

🌳 Hierarchical Data Structure

• Tree-like nested rows with expandable/collapsible functionality
• Visual tree connectors with customizable styling
• Support for unlimited nesting levels
• Accordion-style content expansion

🔧 Advanced Table Operations

• Sorting: Click-to-sort columns with ascending/descending indicators
• Selection: Multiple selection modes (none, checkbox, radio)
• Column Freezing: Freeze columns on left or right side
• Search Integration: Built-in support for data filtering

🎨 Customization

• Custom header styles (background, text, icons)
• Configurable accordion colors and indicators
• Flexible cell content (text or custom widgets)
• Responsive column width management

Getting Started

Add this package to your pubspec.yaml:

dependencies:
  custom_table: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:custom_table/custom_table.dart';

Usage

Basic Table

Here's a simple example of creating a basic table:

RATable(
  rows: [
    RATableRowData(
      cells: [
        RATableCell(titleText: '1'),
        RATableCell(titleText: 'John Doe'),
        RATableCell(titleText: 'john@example.com'),
        RATableCell(titleText: '+1-555-0101'),
      ],
    ),
    RATableRowData(
      cells: [
        RATableCell(titleText: '2'),
        RATableCell(titleText: 'Jane Smith'),
        RATableCell(titleText: 'jane@example.com'),
        RATableCell(titleText: '+1-555-0102'),
      ],
    ),
  ],
  columns: [
    RATableColumn(titleText: 'ID', sortable: true),
    RATableColumn(titleText: 'Name', sortable: true),
    RATableColumn(titleText: 'Email', sortable: true),
    RATableColumn(titleText: 'Phone', sortable: true),
  ],
)

Advanced Configuration

For more complex use cases with styling and functionality:

RATable(
  rows: tableRows,
  columns: tableColumns,
  columnWidths: {
    0: 100.0,
    1: 200.0,
    2: 250.0,
    3: 150.0,
  },
  selectableType: RATableSelectableType.checkbox,
  headerStyle: RATableHeaderStyle(
    backgroundColor: Colors.blue[50],
    textStyle: TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.blue[800],
    ),
    iconColor: Colors.blue[600],
  ),
  bodyTextStyle: TextStyle(fontSize: 14),
  onSort: (columnIndex) {
    // Handle sorting logic
    print('Sorting column $columnIndex');
  },
  currentSortColumnIndex: 0,
  sortAscending: true,
)

Hierarchical Data (Tree Structure)

Create expandable tree-like structures:

RATable(
  rows: [
    RATableRowData(
      cells: [
        RATableCell(titleText: 'Department'),
        RATableCell(titleText: 'Engineering'),
        RATableCell(titleText: 'engineering@company.com'),
      ],
      children: [
        RATableRowData(
          cells: [
            RATableCell(titleText: 'Team Lead'),
            RATableCell(titleText: 'Alice Johnson'),
            RATableCell(titleText: 'alice@company.com'),
          ],
          children: [
            RATableRowData(
              cells: [
                RATableCell(titleText: 'Developer'),
                RATableCell(titleText: 'Bob Wilson'),
                RATableCell(titleText: 'bob@company.com'),
              ],
            ),
          ],
        ),
      ],
    ),
  ],
  columns: [
    RATableColumn(titleText: 'Role'),
    RATableColumn(titleText: 'Name'),
    RATableColumn(titleText: 'Email'),
  ],
  accordionStyle: RATableAccordionStyle(
    headColor: Colors.white,
    iconColor: Colors.blue,
    lineColor: Colors.blue,
  ),
)

Accordion Content

Add expandable content within rows:

RATableRowData(
  cells: [
    RATableCell(titleText: 'Project Alpha'),
    RATableCell(titleText: 'In Progress'),
  ],
  child: Card(
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Project Details', style: TextStyle(fontWeight: FontWeight.bold)),
          SizedBox(height: 8),
          Text('This project involves developing a new mobile application...'),
        ],
      ),
    ),
  ),
)

Column Freezing

Freeze columns for better navigation in large tables:

RATable(
  rows: tableRows,
  columns: tableColumns,
  freezeColumnLeft: RATableFreeze(
    length: 2, // Freeze first 2 columns on the left
    shadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        blurRadius: 4,
        offset: Offset(2, 0),
      ),
    ],
  ),
  freezeColumnRight: RATableFreeze(
    length: 1, // Freeze last column on the right
  ),
)

Selection Types

The table supports different selection modes:

// No selection
selectableType: RATableSelectableType.none

// Checkbox selection (multiple)
selectableType: RATableSelectableType.checkbox

// Radio selection (single)
selectableType: RATableSelectableType.radio

API Reference

RATable

Property	Type	Description
rows	List<RATableRowData>	Data rows to display
columns	List<RATableColumn>	Column definitions
selectableType	RATableSelectableType	Selection mode (none, checkbox, radio)
columnWidths	Map<int, double>?	Custom column widths
headerStyle	RATableHeaderStyle?	Header styling options
bodyTextStyle	TextStyle?	Body text styling
accordionStyle	RATableAccordionStyle?	Tree/accordion styling
onSort	Function(int)?	Sort callback
freezeColumnLeft	RATableFreeze?	Left column freezing
freezeColumnRight	RATableFreeze?	Right column freezing

RATableRowData

Property	Type	Description
cells	List<RATableCell>	Cell data for the row
isSelected	bool	Selection state
isExpanded	bool	Expansion state
child	Widget?	Expandable content widget
children	List<RATableRowData>?	Nested child rows

RATableCell

Property	Type	Description
titleText	String?	Text content
title	Widget?	Custom widget content
width	double?	Cell-specific width

Example

Check out the /example folder for a complete working example demonstrating all features including:

• Complex hierarchical data structures
• Custom styling and theming
• Sorting and selection functionality
• Accordion-style content expansion
• Column freezing capabilities

Additional Information

This package is designed to handle complex data presentation needs in Flutter applications. Whether you're building admin dashboards, data management interfaces, or organizational charts, the Custom Table package provides the flexibility and features you need.

Contributing

Contributions are welcome! Please feel free to submit issues, feature requests, or pull requests.

License

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

ra_table