OperanceDataTable

OperanceDataTable is a powerful, flexible, and highly customizable data table widget for Flutter applications. It provides a rich set of features that make displaying and interacting with tabular data a breeze, while offering an exceptional developer experience.

Features

• Effortless Data Handling: Easily manage and display large datasets with built-in pagination and infinite scrolling support.
• Advanced Sorting: Enable multi-column sorting with customizable sort icons and behavior.
• Flexible Search: Implement powerful search functionality with customizable search field decoration, placement and behavior.
• Row Selection: Allow users to select single or multiple rows with customizable selection behavior.
• Expandable Rows: Create interactive tables with expandable rows for additional details or nested data.
• Column Reordering: Enable users to reorder columns for a personalized view of the data.
• Highly Customizable: Tailor every aspect of the table's appearance and behavior to match your app's design and requirements.
• Responsive Design: Automatically adjusts to different screen sizes and orientations.
• Keyboard Navigation: Enhance accessibility with built-in keyboard navigation support.
• Theming Support: Easily integrate with your app's theme for a cohesive look and feel.

To see example of the following OperanceDataTable on a device or simulator:

cd example/
flutter run --release

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  operance_datatable: ^1.0.6

Then run:

flutter pub get

Usage

To use OperanceDataTable, first import the package:

import 'package:operance_datatable/operance_datatable.dart';

Then, you can create an OperanceDataTable widget in your Flutter app:

OperanceDataTable<YourDataType>(
  columns: <OperanceDataColumn<YourDataType>[
    // Define your columns here
  ],
  onFetch: (limit, sort, {bool isInitial = true}) async {
    // Implement your data fetching logic here
  },
  // Add more configuration options as needed
)

Example

Here's a more complete example of how to use OperanceDataTable:

import 'package:flutter/material.dart';
import 'package:operance_datatable/operance_datatable.dart';

class OperanceDataTablePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('OperanceDataTable Example')),
      body: OperanceDataTable<Pokemon>(
        onFetch: (limit, sort, {bool isInitial = true}) async {
          // Implement your data fetching logic hered
          if (isInitial) {
            final pokemon = await PokeApi.fetchPokemon(
              limit: limit,
              sort: sort?.map((key, value) => MapEntry(key, value == SortDirection.ascending)),
            );

            return (pokemon, PokeApi.hasNextPage);
          } else {
            final pokemon = await PokeApi.fetchMore(limit: limit);

            return (pokemon, PokeApi.hasNextPage);
          }
        },
        columns: <OperanceDataColumn<Pokemon>>[
          OperanceDataColumn<Pokemon>(
            name: 'id',
            sortable: true,
            columnHeader: Text('ID'),
            cellBuilder: (context, item) => Text(item.id.toString()),
            numeric: true,
            getValue: (item) => item.id,
            width: const OperanceDataColumnWidth(factor: 0.1),
          ),
          OperanceDataColumn<Pokemon>(
            name: 'name',
            sortable: true,
            columnHeader: Text('Name'),
            cellBuilder: (context, item) => Text(item.name),
            getValue: (item) => item.name,
            getSearchableValue: (item) => item.name,
            width: const OperanceDataColumnWidth(factor: 0.25),
          ),
          // Add more columns as needed
        ],
        expansionBuilder: (pokemon) {
          return SizedBox(
            height: 100.0,
            child: Wrap(
              spacing: 8.0,
              children: <Widget>[
                Image.network(pokemon.sprites.frontDefault),
                Image.network(pokemon.sprites.backDefault),
                Image.network(pokemon.sprites.frontShiny),
                Image.network(pokemon.sprites.backShiny),
              ],
            ),
          );
        },
        expandable: true,
        selectable: true,
        searchable: true,
        showHeader: true,
        showEmptyRows: true,
        showRowsPerPageOptions: true,
        allowColumnReorder: true,
      ),
    );
  }
}

Customization

OperanceDataTable offers extensive customization options through the OperanceDataDecoration class. You can customize colors, icons, sizes, styles, and UI behavior. Here's an example of how to customize the table's appearance:

OperanceDataTable<YourDataType>(
  // ... other properties
  decoration: OperanceDataDecoration(
    colors: OperanceDataColors(
      headerColor: Colors.blue[100],
      rowColor: Colors.white,
      rowHoverColor: Colors.blue[50],
    ),
    icons: OperanceDataIcons(
      columnHeaderSortAscendingIcon: Icons.arrow_upward,
      columnHeaderSortDescendingIcon: Icons.arrow_downward,
    ),
    sizes: OperanceDataSizes(
      headerHeight: 70.0,
      rowHeight: 60.0,
    ),
    styles: OperanceDataStyles(
      searchDecoration: InputDecoration(
        hintText: 'Search...',
        prefixIcon: Icon(Icons.search),
        border: OutlineInputBorder(),
      ),
    ),
    ui: OperanceDataUI(
      animationDuration: 300,
      rowsPerPageOptions: [10, 20, 50, 100],
      searchPosition: SearchPosition.left,
    ),
  ),
)

Contributing

We welcome contributions to OperanceDataTable! Please see our contributing guidelines for more information on how to get started.

License

OperanceDataTable is released under the MIT License. See the LICENSE file for details.