Stacked headers

[athiraHash]

How to add stacked headers with other column

[Tamilarasan-Paranthaman]

Hi @athiraHash,

The SfDataGrid offers support for displaying stacked headers that span across multiple DataGrid columns. This functionality can be achieved by setting the StackedHeaderRows through the SfDataGrid.stackedHeaderRows property. To provide a clear understanding, we have included a simple sample for your reference. Please refer to the attached sample for further insight.

Sample Link: Sample

Furthermore, we have included comprehensive information about stacked headers in the provided User Guide (UG) document. For a more detailed insight into this feature, please refer to the link provided below. This documentation should provide you with a comprehensive understanding of how to implement stacked headers effectively.

UG Document: https://help.syncfusion.com/flutter/datagrid/stacked-headers

Regards,
Tamilarasan

[athiraHash]

Ok thanks for your valuable feedback I will check that . I have one another doubt is there any option to add a bar chart in column cell

…

On Wed, Aug 9, 2023 at 7:21 PM Tamilarasan Paranthaman < ***@***.***> wrote: Hi @athiraHash <https://github.com/athiraHash>, The SfDataGrid offers support for displaying stacked headers that span across multiple DataGrid columns. This functionality can be achieved by setting the *StackedHeaderRows* through the *SfDataGrid.stackedHeaderRows* property. To provide a clear understanding, we have included a simple sample for your reference. Please refer to the attached sample for further insight. *Sample Link: Sample <https://github.com/syncfusion/flutter-widgets/files/12303434/sample.zip>* Furthermore, we have included comprehensive information about stacked headers in the provided User Guide (UG) document. For a more detailed insight into this feature, please refer to the link provided below. This documentation should provide you with a comprehensive understanding of how to implement stacked headers effectively. *UG Document: https://help.syncfusion.com/flutter/datagrid/stacked-headers <https://help.syncfusion.com/flutter/datagrid/stacked-headers>* Regards, Tamilarasan — Reply to this email directly, view it on GitHub <#1334 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5X4V74YMHOWCGQ2UURGEN3XUOIVJANCNFSM6AAAAAA3J2AMP4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- ATHIRA RAJ [image: HASHINCLUDE] UNITED ARAB EMIRATES 25°25'05.3" N, 55°27'12.8" E — e. ***@***.*** w. :http://hashinclu.de —

[Tamilarasan-Paranthaman]

@athiraHash,

The DataGrid inherently supports loading widgets into its cells via the DataGridSource.buildRow method. Based on your specific request, you can load "bar chart" widgets into the DataGrid cells. We've prepared and provided an example that demonstrates how to load widgets into DataGrid cells. In this sample, we've used the Icon Widget as an illustration, and you can apply the same approach to load bar charts into cells. For a detailed implementation, please review the provided code snippet and sample.

Sample Link: Sample

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource() {
    buildDataGridRows();
  }

  List<DataGridRow> datagridRows = [];

  @override
  List<DataGridRow> get rows => datagridRows;

  void buildDataGridRows() {
    datagridRows = _employees
        .map<DataGridRow>((e) => DataGridRow(cells: [
              DataGridCell<int>(columnName: 'ID', value: e.id),
              DataGridCell<String>(columnName: 'Name', value: e.name),
              DataGridCell<String>(
                  columnName: 'Designation', value: e.designation),
              DataGridCell<bool>(columnName: 'Available', value: e.isAvailable),
              DataGridCell<int>(columnName: 'Salary', value: e.salary),
            ]))
        .toList();
  }

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((dataGridCell) {
      return dataGridCell.columnName == 'Available'
          ? getAvailableStatus(isAvailable: dataGridCell.value) 
          : Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.symmetric(horizontal: 8),
              child: Text(dataGridCell.value.toString()),
            );
    }).toList());
  }

  // Returns the icon based on the availability of the employee.
  getAvailableStatus({bool isAvailable = false}) {
    if (isAvailable == true) {
      // Returns green color check icon if the employee is available.
      return const Icon(Icons.check_circle, color: Colors.green);
    } else {
      // Returns red color cancel icon if the employee is not available.
      return const Icon(Icons.cancel, color: Colors.red);
    }
  }
}

[ashok-kuvaraja]

Hi @athiraHash,

It appears that the workaround we've suggested may fulfill your needs. We are closing this issue. If you have any additional needs or questions, please don't hesitate to reopen it. We're here to support you.

Regards,

Ashok K