Question 75778 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create table with merged cells in flutter?

enter image description here
how too create datatabel in flutter that look like that:

I create one datatable in that table data pass by API and I need to show the data in table forment
in this tabel first two and last two column cell merge size base on middle column data.

 DataTable(
      columns: const [
        DataColumn(label: Text("Zone")),
        DataColumn(label: Text("Point")),
        DataColumn(label: Text("Designation")),
        DataColumn(label: Text("Buckle Number")),
        DataColumn(label: Text("Police Name")),
        DataColumn(label: Text("District")),
        DataColumn(label: Text("Police Station Name")),
        DataColumn(label: Text("Age")),
        DataColumn(label: Text("Gender")),
        DataColumn(label: Text("Number")),
        DataColumn(label: Text("Accessories")),
        DataColumn(label: Text("Remarks"))
      ],
      rows: controller.eventAssignmentModel.value?.pointAssignments![index]
              .assignedPoliceList!
              .asMap()
              .map((index4, police) => MapEntry(
                  index4,
                  DataRow(cells: [
                    DataCell(Text(controller.eventAssignmentModel.value!.pointAssignments![index].zoneName!)),
                    DataCell(Text(controller.eventAssignmentModel.value!.pointAssignments![index].pointName!)),
                    DataCell(Text(police.designation ?? '')),
                    DataCell(Text(police.buckleNumber ?? '')),
                    DataCell(Text(police.policeName ?? '')),
                    DataCell(Text(police.district ?? '')),
                    DataCell(Text(police.policeStationName ?? '')),
                    DataCell(Text(police.age ?? '')),
                    DataCell(Text(police.gender ?? '')),
                    DataCell(Text(police.number ?? '')),
                    DataCell(Text(controller.eventAssignmentModel.value!.pointAssignments![index].pointAccessories!)),
                    DataCell(Text(controller.eventAssignmentModel.value!.pointAssignments![index].pointRemarks!)),
                  ])))
              .values
              .toList() ??
          const [],
    ),
Tags:

2

Answers


  1. 0

    Flutter doesn’t have rowspan and colspan capabilities as far as i know…
    You can try this=> https://flutterawesome.com/flutter-table-but-columns-are-mergable/

    Login or Signup to reply.
  2. 0

    You might want to think about in in the opposite way: not merging, but rather splitting cells.

    Since TableRow accepts any widget in children, you can put a table inside a table, achieving basically the same result. Please check the following code, you can run it in Dartpad.

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Table(border: TableBorder.all(), children: [
            const TableRow(children: [
              Text('Column 1'),
              Text('Column 2'),
            ]),
            TableRow(children: [
              const Text('Entry 1'),
              Table(border: TableBorder.all(), children: const [
                TableRow(children: [
                  Text('Nested Entry 1'),
                  Text('Nested Entry 2'),
                ]),
                TableRow(children: [
                  Text('Nested Entry 3'),
                  Text('Nested Entry 4'),
                ]),
              ]),
            ]),
          ]),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search