How to Add Dynamic table to Flutter

Question

How to map existing values to a Flutter Dynamic Table?

The following is my existing working code. is using json to print the values. those existing values I would like to print to a table and eventually sort them by columns. Note: New to Flutter and I appreciate your assistance.

class PhotosList extends StatelessWidget {
  final List<Photo> photos;

  PhotosList({Key key, this.photos}) : super(key: key);



  @override
  Widget build(BuildContext context) {


    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: photos.length,
      itemBuilder: (context, index) {
        return ListTile(
          // leading: Icon(Icons.album),
          title: Column(  children: [
            Text(photos[index].symbol),
            Padding(padding: EdgeInsets.only(bottom: 10.0)),
            //Text(photos[index].companyName),

          ],
          ),
          subtitle: Column(


            children: [

              Text ('${photos[index].data["quote"]["companyName"] ?? ""}'),
              Text ("Dividend Yield:" '${photos[index].data["stats"]["dividendYield"] ?? ""}'),
              Text ("Last Price:" '${photos[index].data["quote"]["iexBidPrice"]?? ""}'),
              Text ("Last Price:" '${photos[index].data["stats"]["latestPrice"]?? ""}'),

              //


            ],
          ),
        );
      },
    );
  }
}

Data Table: from: https://github.com/iampawan/FlutterWidgets/blob/master/lib/Episode5_DataTable/datatable_example.dart

Widget bodyData() => DataTable(
      onSelectAll: (b) {},
      sortColumnIndex: 1,
      sortAscending: true,
      columns: <DataColumn>[
        DataColumn(
          label: Text("First Name"),
          numeric: false,
          onSort: (i, b) {
            print("$i $b");
            setState(() {
              names.sort((a, b) => a.firstName.compareTo(b.firstName));
            });
          },
          tooltip: "To display first name of the Name",
        ),
        DataColumn(
          label: Text("Last Name"),
          numeric: false,
          onSort: (i, b) {
            print("$i $b");
            setState(() {
              names.sort((a, b) => a.lastName.compareTo(b.lastName));
            });
          },
          tooltip: "To display last name of the Name",
        ),
      ],
      rows: names
          .map(
            (name) => DataRow(
                  cells: [
                    DataCell(
                      Text(name.firstName),
                      showEditIcon: false,
                      placeholder: false,
                    ),
                    DataCell(
                      Text(name.lastName),
                      showEditIcon: false,
                      placeholder: false,
                    )
                  ],
                ),
          )
          .toList());

https://material.io/components/data-tables/#

Thank you! 😊

You don't seem to be asking a question or need help fixing a coding issue. It looks like you want someone to implement your code for you. I would advise you to check the question guidelines: stackoverflow.com/help/how-to-ask - PS: I'm not sure why you are saying you are new to Flutter when you have been asking questions about Flutter since 2018. — J. S.
– J. S., Commented Jan 11, 2020 at 15:38

Crazy Lazy Cat · Accepted Answer · 2020-01-14 15:34:19Z

5

+50

I am not sure what kind of difficulty you are facing.

Try this,

class PhotosList extends StatefulWidget {
  final List photos;

  PhotosList({Key key, this.photos})
      : assert(photos != null),
        super(key: key);

  @override
  _PhotosListState createState() => _PhotosListState();
}

class _PhotosListState extends State<PhotosList> {
  @override
  Widget build(BuildContext context) {
    return bodyData();
  }

  Widget bodyData() => DataTable(
      sortColumnIndex: 1,
      sortAscending: true,
      columns: <DataColumn>[
        DataColumn(
          label: Text("Company Name"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["quote"]["companyName"]
                  .compareTo(b.data["quote"]["companyName"]));
            });
          },
        ),
        DataColumn(
          label: Text("Dividend Yield"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["stats"]["dividendYield"]
                  .compareTo(b.data["stats"]["dividendYield"]));
            });
          },
        ),
        DataColumn(
          label: Text("IEX Bid Price"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["quote"]["iexBidPrice"]
                  .compareTo(b.data["quote"]["iexBidPrice"]));
            });
          },
        ),
        DataColumn(
          label: Text("Latest Price"),
          onSort: (_, __) {
            setState(() {
              widget.photos.sort((a, b) => a.data["stats"]["latestPrice"]
                  .compareTo(b.data["stats"]["latestPrice"]));
            });
          },
        ),
      ],
      rows: widget.photos
          .map(
            (photo) => DataRow(
              cells: [
                DataCell(
                  Text('${photo.data["quote"]["companyName"] ?? ""}'),
                ),
                DataCell(
                  Text("Dividend Yield:"
                      '${photo.data["stats"]["dividendYield"] ?? ""}'),
                ),
                DataCell(
                  Text("Last Price:"
                      '${photo.data["quote"]["iexBidPrice"] ?? ""}'),
                ),
                DataCell(
                  Text("Last Price:"
                      '${photo.data["stats"]["latestPrice"] ?? ""}'),
                ),
              ],
            ),
          )
          .toList());
}

answered Jan 14, 2020 at 15:34

Crazy Lazy Cat

15.3k5 gold badges36 silver badges55 bronze badges

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

4 Comments

Dev Ed Over a year ago

Super Thanks it worked! one last thing can you add a sort and frame/borders 😊 ?

Crazy Lazy Cat Over a year ago

border for each cell?. Do you have any design screenshot to share?

Dev Ed Over a year ago

material.io/components/data-tables/# added screenshot. example like the lines in between the rows and headers in columns

Dev Ed Over a year ago

Hello, can you help me with this bounty: stackoverflow.com/questions/61999463/…

Collectives™ on Stack Overflow

How to Add Dynamic table to Flutter

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related