apptomate_custom_data_table 0.0.2

An enhanced DataTable widget with customizable styling and layout options for Flutter applications.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const CustomDataTableWidget(),
    );
  }
}

// Enhanced Example Usage
class CustomDataTableWidget extends StatefulWidget {
  const CustomDataTableWidget({super.key});

  @override
  State<CustomDataTableWidget> createState() => _CustomDataTableExampleState();
}

class _CustomDataTableExampleState extends State<CustomDataTableWidget> {
  bool _sortAscending = true;
  int? _sortColumnIndex;
  bool _showCheckbox = false;
  bool _paginated = true;
  bool _darkMode = false;

  List<Map<String, dynamic>> _data = List.generate(25, (index) {
    return {
      'id': index + 1,
      'name': 'User ${index + 1}',
      'age': 20 + (index % 20),
      'email': 'user${index + 1}@example.com',
      'status': ['Active', 'Inactive', 'Pending'][index % 3],
    };
  });

  void _sortData(int columnIndex, bool ascending) {
    setState(() {
      _sortColumnIndex = columnIndex;
      _sortAscending = ascending;

      switch (columnIndex) {
        case 0:
          _data.sort((a, b) => ascending
              ? a['id'].compareTo(b['id'])
              : b['id'].compareTo(a['id']));
          break;
        case 1:
          _data.sort((a, b) => ascending
              ? a['name'].compareTo(b['name'])
              : b['name'].compareTo(a['name']));
          break;
        case 2:
          _data.sort((a, b) => ascending
              ? a['age'].compareTo(b['age'])
              : b['age'].compareTo(a['age']));
          break;
        case 3:
          _data.sort((a, b) => ascending
              ? a['status'].compareTo(b['status'])
              : b['status'].compareTo(a['status']));
          break;
      }
    });
  }

  void _deleteSelected() {
    setState(() {
      _data.removeWhere((item) => item['selected'] == true);
    });
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(
          title: const Text('Enhanced Data Table'),
          actions: [
            Switch(
              value: _showCheckbox,
              onChanged: (value) => setState(() => _showCheckbox = value),
            ),
            Switch(
              value: _paginated,
              onChanged: (value) => setState(() => _paginated = value),
            ),
            Switch(
              value: _darkMode,
              onChanged: (value) => setState(() => _darkMode = value),
            ),
          ],
        ),
        body: CustomDataTable(
          showCheckboxColumn: _showCheckbox,
          headingRowColor: Colors.blueAccent,
          evenRowColor: Colors.grey[100],
          oddRowColor: Colors.white,
          columnSpacing: 24,
          dataRowMinHeight: 56,
          headingRowHeight: 64,
          sortable: true,
          paginated: _paginated,
          rowsPerPage: 5,
          showActions: true,
          actions: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _data.add({
                    'id': _data.length + 1,
                    'name': 'New User',
                    'age': 25,
                    'email': '[e-mail]',
                    'status': 'Pending',
                  });
                });
              },
              child: const Text('Add Item'),
            ),
          ],
          border: TableBorder(
            horizontalInside: BorderSide(color: Colors.grey[300]!),
            verticalInside: BorderSide(color: Colors.grey[300]!),
            top: BorderSide(color: Colors.grey[300]!),
            bottom: BorderSide(color: Colors.grey[300]!),
            left: BorderSide(color: Colors.grey[300]!),
            right: BorderSide(color: Colors.grey[300]!),
          ),
          headingTextStyle: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
          rowTextStyle: const TextStyle(fontSize: 14),
          showFirstLastButtons: true,
          showFooter: true,
          columns: [
            DataColumn(
              label: const Text('ID'),
              numeric: true,
              onSort: (columnIndex, ascending) {
                _sortData(columnIndex, ascending);
              },
            ),
            DataColumn(
              label: const Text('Name'),
              onSort: (columnIndex, ascending) {
                _sortData(columnIndex, ascending);
              },
            ),
            DataColumn(
              label: const Text('Age'),
              numeric: true,
              onSort: (columnIndex, ascending) {
                _sortData(columnIndex, ascending);
              },
            ),
            DataColumn(
              label: const Text('Status'),
              onSort: (columnIndex, ascending) {
                _sortData(columnIndex, ascending);
              },
            ),
            const DataColumn(
              label: Text('Actions'),
            ),
          ],
          rows: _data
              .map(
                (data) => DataRow(
              selected: data['selected'] ?? false,
              onSelectChanged: _showCheckbox
                  ? (selected) {
                setState(() {
                  data['selected'] = selected;
                });
              }
                  : null,
              cells: [
                DataCell(Text(data['id'].toString())),
                DataCell(Text(data['name'])),
                DataCell(Text(data['age'].toString())),
                DataCell(
                  Chip(
                    label: Text(
                      data['status'],
                      style: TextStyle(
                        color: data['status'] == 'Active'
                            ? Colors.green[800]
                            : data['status'] == 'Pending'
                            ? Colors.orange[800]
                            : Colors.red[800],
                      ),
                    ),
                    backgroundColor: data['status'] == 'Active'
                        ? Colors.green[100]
                        : data['status'] == 'Pending'
                        ? Colors.orange[100]
                        : Colors.red[100],
                  ),
                ),
                DataCell(
                  Row(
                    children: [
                      IconButton(
                        icon: const Icon(Icons.edit, size: 20),
                        onPressed: () {
                          // Edit functionality
                        },
                      ),
                      IconButton(
                        icon: const Icon(Icons.delete, size: 20, color: Colors.red),
                        onPressed: () {
                          setState(() {
                            _data.remove(data);
                          });
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
              .toList(),
        ),
      );
  }
}