Customize Column Grid

[Robert Jones]

Is there a way to have the icons show also within the Container of the Text?

Attachment: Screenshot_20231212_at_8.38.03_PM_f65297ad.zip

[Tamilarasan Paranthaman]

Hi Robert Jones,

In the current Flutter SfDataGrid structure, you have the flexibility to load various widgets in both the header and DataGrid cells. To meet your specific requirement, you can achieve this by incorporating column text along with an icon within the Row widget. Subsequently, load this Row widget within the `GridColumn.label` property.

We have provided a basic sample demonstrating this functionality. In the attached sample, we've showcased the loading of column text alongside icon widgets. For further details, please refer to the following code snippet and sample.

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: const Text('Syncfusion DataGrid Demo')),

      body: SfDataGrid(

        source: _employeeDataSource,

        columns: <GridColumn>[

          GridColumn(

              columnName: 'ID',

              label: Row(

                mainAxisAlignment: MainAxisAlignment.center,

                children: [

                  Container(

                      alignment: Alignment.center, child: const Text('ID')),

                  Container(

                      padding: const EdgeInsets.only(left: 5),

                      alignment: Alignment.center,

                      child: const Icon(Icons.numbers, size: 18)),

                ],

              )),

          GridColumn(

              columnName: 'Name',

              label: Row(

                mainAxisAlignment: MainAxisAlignment.center,

                children: [

                  Container(

                      alignment: Alignment.center, child: const Text('Name')),

                  Container(

                      padding: const EdgeInsets.only(left: 5),

                      alignment: Alignment.center,

                      child: const Icon(Icons.person, size: 18)),

                ],

              )),

          GridColumn(

              columnName: 'Designation',

              label: Container(

                  alignment: Alignment.center,

                  child: const Text('Designation'))),

          GridColumn(

              columnName: 'Email',

              label: Row(

                mainAxisAlignment: MainAxisAlignment.center,

                children: [

                  Container(

                      alignment: Alignment.center, child: const Text('Email')),

                  Container(

                      padding: const EdgeInsets.only(left: 5),

                      alignment: Alignment.center,

                      child: const Icon(Icons.email, size: 18)),

                ],

              )),

        ],

        columnWidthMode: ColumnWidthMode.fill,

      ),

    );

  }

Regards,

Tamilarasan

Attachment: Sample_30788713.zip