flutterdartsdkflutter-dependencies

Is there anyway to optimize the table rendering in pluto_grid for huge number of columns?


I'm working on a Flutter project where I need to display a data table using the PlutoGrid widget. The table is rendering data from a list of maps, and each map contains information about a case (like eye color, missing date, etc.). And right now there are not much data in the table. In case of even 2-3 rows it renders very slowly. And these are just few columns. The actual data has way too many columns. So I am not even sure, how much time it is going to take then Below is the code snippet I am using:

class WebCaseList extends StatelessWidget {
  final List<Map<String, dynamic>> caseList;

  WebCaseList({required this.caseList});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 20.0, top: 20, left: 20),
      child: PlutoGrid(
        columns: _buildColumns(),
        rows: _buildRows(),
        mode: PlutoGridMode.readOnly,
        onChanged: (PlutoGridOnChangedEvent event) {},
        configuration: PlutoGridConfiguration(
          style: PlutoGridStyleConfig(
            menuBackgroundColor: Color.fromRGBO(43, 58, 85, 1),
            rowHeight: 70,
            defaultColumnTitlePadding: EdgeInsets.only(left: 20),
            enableCellBorderHorizontal: true,
            gridBorderRadius: BorderRadius.circular(8),
            gridBorderColor: Color(0xFFE2E9EA),
            enableGridBorderShadow: true,
            enableCellBorderVertical: false,
          ),
          columnSize: const PlutoGridColumnSizeConfig(
              autoSizeMode: PlutoAutoSizeMode.scale,
              resizeMode: PlutoResizeMode.normal),
          scrollbar: PlutoGridScrollbarConfig(
            scrollbarThickness: 8,
            scrollbarRadius: Radius.circular(8),
            scrollBarColor: Color(0XFF40038D),
          ),
        ),
      ),
    );
  }

  List<PlutoColumn> _buildColumns() {
    return [
      PlutoColumn(
          title: 'Eye Natural Color',
          field: 'eyeNaturalColor',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Missing Date',
          field: 'missingDate',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Sex',
          field: 'sex',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Case Number',
          field: 'caseNumber',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Case Manager',
          field: 'caseManager',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'First Name',
          field: 'firstName',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Middle Name',
          field: 'middleName',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Last Name',
          field: 'lastName',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Case Type',
          field: 'caseType',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Request Type',
          field: 'requestType',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'City',
          field: 'city',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'ZIP',
          field: 'zip',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'State',
          field: 'state',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Country',
          field: 'country',
          type: PlutoColumnType.text(),
          minWidth: 150),
    ];
  }

  List<PlutoRow> _buildRows() {
    return caseList.map((caseItem) {
      return PlutoRow(cells: {
        'eyeNaturalColor': PlutoCell(value: caseItem['eyeNaturalColor'] ?? ''),
        'sex': PlutoCell(value: caseItem['sex'] ?? ''),
        'missingDate': PlutoCell(value: caseItem['missingDate'] ?? ''),
        'caseNumber': PlutoCell(value: caseItem['caseNumber'] ?? ''),
        'caseManager': PlutoCell(value: caseItem['caseManager'] ?? ''),
        'firstName': PlutoCell(value: caseItem['firstName'] ?? ''),
        'middleName': PlutoCell(value: caseItem['middleName'] ?? ''),
        'lastName': PlutoCell(value: caseItem['lastName'] ?? ''),
        'caseType': PlutoCell(value: caseItem['caseType'] ?? ''),
        'requestType': PlutoCell(value: caseItem['requestType'] ?? ''),
        'city': PlutoCell(value: caseItem['city'] ?? ''),
        'zip': PlutoCell(value: caseItem['zip'] ?? ''),
        'state': PlutoCell(value: caseItem['state'] ?? ''),
        'country': PlutoCell(value: caseItem['country'] ?? ''),
      });
    }).toList();
  }
}

Solution

  • This is how we can do it:

    PlutoColumn(
              title: columnDef['title']!,
              field: columnDef['field']!,
              type: PlutoColumnType.text(),
              backgroundColor: const Color(0xFF2B3A55),
    )