CODEWITHSUNDEEP
flutter
Timebreaker900
Timebreaker900

Reputation: 332

Flutter - Datatables - Child Rows - Row Details

I made a Datatable with Flutter looks like this:

enter image description here

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!

Upvotes: 2

Views: 758

Answers (1)

Dev
Dev

Reputation: 6776

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(),
),

Upvotes: 2

Related Questions