flutter data table using dynmic content to show grid column

Issue

when I try to data in the list it’s showing

But I m not able to show it in the data table.

Listview

import 'package:flutter/material.dart';
import 'package:flutter_sample/src/data/models/emp_data.dart';

class ListingData extends StatelessWidget {
final List<ListData> emp;

const ListingData({Key? key,required this.emp}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView.builder(
  itemCount: emp.length,
  itemBuilder: (context, index) {
    final empData = emp[index];
    return ListTile(
      title: Text('${empData.emp_name}'),
      subtitle: Text('${empData.designation}'),
    );
  },
);
}
}

i want to try with data table same data

example code

return DataTable(

  columns: const <DataColumn>[
    DataColumn(
      label: Text(
        'ID',
      ),
    ),
    DataColumn(
      label: Text(
        'Name',
      ),
    ),
    DataColumn(
      label: Text(
        'Role',
      ),
    ),
  ],


  rows: const <DataRow>[
    DataRow(
      cells: <DataCell>[
        DataCell(Text('${empData.id}'),
        DataCell(Text('${empData.emp_name}')),
   
      ],
    ),


  ],
);

I don’t know how to get index values and data to set columns.

this thing how to set as the data table

itemCount: emp.length,
itemBuilder: (context, index) {
final empData = emp[index];

can anyone suggest to me the proper way to do

Solution

Define rows as follows:

  rows: List.generate(
        emp.length,
        (index) => empDataRow(
            emp[index],
            )),

And define datarows(Here empDataRow) as follows where Employee your empData’s class:

   DataRow empDataRow(Employee empData) {
     return DataRow(
            cells: <DataCell>[
               DataCell(Text('${empData.id}'),
               DataCell(Text('${empData.emp_name}')),
             ],),

Answered By – smita

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *