import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:gap/gap.dart';
import 'package:go_router/go_router.dart';
import 'package:tp5/core/basic_page.dart';
import 'package:data_table_2/data_table_2.dart';

class RostersPage extends ConsumerStatefulWidget {
  const RostersPage({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _RostersPageState();
}

class _RostersPageState extends ConsumerState<RostersPage> {
  @override
  Widget build(BuildContext context) {
    return buildFixedDataTable(tableData);
  }

// Example of a custom widget with fixed column and row headers
  Widget buildFixedDataTable(List<List<String>> data) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: data[0]
              .map<DataColumn>((name) => DataColumn(
                      label: Text(
                    name,
                    style: const TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.black),
                  )))
              .toList(),
          rows: data
              .sublist(1)
              .map<DataRow>((row) => DataRow(
                    cells: row
                        .map<DataCell>((cell) => DataCell(Text(cell)))
                        .toList(),
                  ))
              .toList(),
        ),
      ),
    );
  }

// Usage example:
  final tableData = [
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    [
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3',
      'Column 1',
      'Column 2',
      'Column 3'
    ],
    // Add more rows and data as needed
  ];
}