operance_datatable 1.0.7 operance_datatable: ^1.0.7 copied to clipboard
OperanceDataTable: A powerful, customizable data table widget for Flutter with features like sorting, searching, infinite scroll, row expansion, and keyboard navigation.
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.