wideDataGridWithScrollbars function

  1. @Preview(name: 'Wide Grid with Scrollbars')
Widget wideDataGridWithScrollbars()

Implementation

@Preview(name: 'Wide Grid with Scrollbars')
Widget wideDataGridWithScrollbars() {
  final data = List.generate(100, (index) {
    final row = <String, dynamic>{'id': index + 1};
    // Generate 20 columns
    for (int i = 0; i < 20; i++) {
      row['col_$i'] = 'Cell R${index}C$i';
    }
    return row;
  });

  final dataSource = _LocalDataGridSource(data: data);

  final columns = <VooDataColumn>[const VooDataColumn<dynamic>(field: 'id', label: 'ID', width: 60)];

  for (int i = 0; i < 20; i++) {
    columns.add(VooDataColumn<dynamic>(field: 'col_$i', label: 'Column ${i + 1}', width: 120));
  }

  final controller = VooDataGridController(dataSource: dataSource, columns: columns);

  dataSource.loadData();

  return Material(
    child: SizedBox(
      height: 400,
      width: 800,
      child: VooDataGrid(controller: controller, alwaysShowHorizontalScrollbar: true, alwaysShowVerticalScrollbar: true),
    ),
  );
}