A Flutter widget that displays a customizable table with headers and rows of data. It supports various customization options for styling and layout. The AppTable widget provides a variety of customization options, including customizable header and data rows, configurable title with styles, support for different text alignments and cell alignments, customizable table dimensions and padding, scrollable table content, and customizable border widths and colors.
Add the following to your pubspec.yaml
file:
dependencies:
app_table: ^0.0.1
Then run flutter pub get
to install the package.
import 'package:app_table/app_table.dart';
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<TableModel> _buildHeaderData() {
return [
TableModel(
expanded: false,
child: Checkbox(
value: true,
onChanged: (val) {},
),
),
TableModel(
data: 'Header 1',
textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
),
TableModel(
data: 'Header 2',
textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
),
TableModel(
data: 'Header 3',
textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
),
TableModel(
data: 'Header 4',
textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.bold),
),
];
}
List<List<TableModel>> _buildDataCustom() {
return List.generate(
4,
(index) => [
TableModel(
expanded: false,
child: Checkbox(
value: false,
onChanged: (val) {},
),
),
TableModel(data: 'Data $index', color: Theme.of(context).colorScheme.errorContainer),
TableModel(data: 'Data $index'),
TableModel(data: 'Data $index', color: Theme.of(context).colorScheme.errorContainer),
TableModel(data: 'Data $index'),
],
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: AppTable(
title: 'This Is Custom Table',
headerData: _buildHeaderData(),
data: _buildDataCustom(),
headerBackgroundColor: Theme.of(context).colorScheme.primaryContainer,
backgroundColor: Theme.of(context).colorScheme.surfaceDim,
dataBottomBorderWidth: 1,
headerBottomBorderWidth: 1,
dataBottomBorderColor: Theme.of(context).colorScheme.outline,
headerBottomBorderColor: Theme.of(context).colorScheme.primary,
borderRadius: 8,
tableBorderWidth: 1,
tableBorderColor: Theme.of(context).colorScheme.outline,
minWidth: 400,
minHeight: 400,
),
),
);
}
}
Check out the example directory for a complete sample app demonstrating the use of the app_table
package.
This project is licensed under the MIT License - see the LICENSE file for details.