Flutter - Datatables - Child Rows - Row Details

Question

I made a Datatable with Flutter looks like this:

The Code looks like this:

DataTable(
  columns: [
    DataColumn(
      label: Text('UID'),
      numeric: false,
      tooltip: "User ID",
    ), 
    DataColumn(
      label: Text('Name'),
      numeric: false,
      tooltip: "User Name",
    ),
    DataColumn(
      label: Text('Placeholder'),
      numeric: false,
      tooltip: "Placeholder",
    ),
  ], 
  rows: users.map(
    (user) => DataRow(
      cells: [
        DataCell(
          Text(user.uid),
          onTap: () {
            print('Clicked on: ${user.uid} : ${user.name}');
          },
        ),
        DataCell(
          Text(user.name)
        ),
        DataCell(
          Text('Placeholder')
        ),
      ]
    ),
  ).toList(),
),

So is it possible to get Child rows? Here is an example: https://datatables.net/examples/server_side/row_details.html

So I want that if you click on one of the rows a child row appears with more information (and buttons in the future).

Any help? Thanks in advance!

Have you tried using an ExpansionPanelList widget?

J. S.
– J. S.

2020-02-12 16:40:55 +00:00
Commented Feb 12, 2020 at 16:40 — J. S.
– J. S., Commented Feb 12, 2020 at 16:40

Dev · Accepted Answer · 2020-02-13 03:57:03Z

2

What about create a detailed page and then do following

DataTable(
  columns: [
    DataColumn(
      label: Text('UID'),
      numeric: false,
      tooltip: "User ID",
    ), 
    DataColumn(
      label: Text('Name'),
      numeric: false,
      tooltip: "User Name",
    ),
    DataColumn(
      label: Text('Placeholder'),
      numeric: false,
      tooltip: "Placeholder",
    ),
  ], 
  rows: users.map(
    (user) => DataRow(
      cells: [
        DataCell(
          Text(user.uid),
          onTap: () {
            print('Clicked on: ${user.uid} : ${user.name}');
          },
        ),
        DataCell(
          Text(user.name)
        ),
        DataCell(
          Row(
            children:<Widget> [
             IconButton(
    icon: Icon(Icons.arrow_right),
    tooltip: 'Show Details',
    onPressed: () {
      Navigator.push(detailapage,argument: user);
    },
  ),Text('Placeholder'),

           ]),
        ),
      ]
    ),
  ).toList(),
),

answered Feb 13, 2020 at 3:57

Dev

6,7962 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Timebreaker900 Over a year ago

Hmm, yeah, I mean it's not that bad, maybe I think about it!

Collectives™ on Stack Overflow

Flutter - Datatables - Child Rows - Row Details

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related