How to re-render data in grid?

[ZdenekKrcal]

Is it possibble to rerender data in datagrid? Im using provider with Consumer. Consumer is running but data doesn't change.

Consumer is embracing complete Plutogrid widget.

[bosskmk]

Hello. Can you give me a minimal sample code to check the problem? I'll check it out if you post the minimum code to reproduce the problem.

[ZdenekKrcal]

Hello, so there is my custom widget inside Consumer:

return Consumer<ContractProvider>(
              builder: (context, contractProvider, _) {
                final _contracts = contractProvider.contracts;
                print('rendered table');

                return ContractsTable(
                  contracts: _contracts,
                  toggleFavorite: (String tickerSymbol) async {
                    await contractProvider.toggleFavoriteContract(
                        tickerSymbol, null);
                  },
                  hiddenColumns: contractProvider.contractsColumnsHide,
                );
              },
            );

And there is my custom widget with PlutoGrid:

class ContractsTable extends StatelessWidget {
  const ContractsTable({
    Key? key,
    required List<Contract> contracts,
    required Future<void> Function(String) toggleFavorite,
    required this.hiddenColumns,
  })  : _contracts = contracts,
        _toggleFavorite = toggleFavorite,
        super(key: key);

  final List<Contract> _contracts;
  final Future<void> Function(String) _toggleFavorite;
  final Map<String, bool> hiddenColumns;

  PlutoRow _buildRow(Contract contract) {
    return PlutoRow(
      cells: {
        'contractName': PlutoCell(value: contract),
        'marketCode': PlutoCell(value: contract.marketCode),
        'bid': PlutoCell(value: contract.bid),
        'ask': PlutoCell(value: contract.ask),
        'bidAskUpdated': PlutoCell(
            value: DateFormatterService.formatTime(contract.bidAskUpdated)),
        'bidSize': PlutoCell(value: contract.bidSize),
        'askSize': PlutoCell(value: contract.askSize),
        'bidAskSpread': PlutoCell(value: contract.bidAskSpread),
        'open': PlutoCell(value: contract.open),
        'last': PlutoCell(value: contract.last),
        'low': PlutoCell(value: contract.low),
        'high': PlutoCell(value: contract.high),
        'change': PlutoCell(value: contract.change),
        'changePercent': PlutoCell(value: contract.changePercent),
        'prevSettlement': PlutoCell(value: contract.prevSettlement),
        'settlement': PlutoCell(value: contract.settlement),
        'estimatedSettlement': PlutoCell(value: contract.estimatedSettlement),
        'openInterest': PlutoCell(value: contract.openInterest),
        'accVolume': PlutoCell(value: contract.accVolume),
        'contractYear': PlutoCell(value: contract.contractYear),
        'currency': PlutoCell(value: contract.currency),
        'lastUpdated': PlutoCell(
            value: DateFormatterService.formatTime(contract.lastUpdated)),
        'actions': PlutoCell(value: contract),
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final List<PlutoColumn> _columns = [
      PlutoColumn(
          title: 'Název',
          field: 'contractName',
          type: PlutoColumnType.text(),
          width: 110,
          frozen: PlutoColumnFrozen.left,
          enableColumnDrag: false,
          enableSorting: false,
          enableContextMenu: false,
          enableEditingMode: false,
          hide: hiddenColumns['contractName'] ?? false,
          renderer: (rendererContext) {
            return InkWell(
              onTap: () {
                Navigator.of(context).pushNamed(
                  HistoryBidAskPage.routeName,
                  arguments: rendererContext.cell!.value,
                );
              },
              child: Text(
                rendererContext.cell!.value.contractName,
                style: const TextStyle(
                  color: BrandColors.lightBlue,
                ),
                overflow: TextOverflow.ellipsis,
              ),
            );
          }),
      PlutoColumn(
        title: 'Trh',
        field: 'marketCode',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['marketCode'] ?? false,
      ),
      PlutoColumn(
        title: 'Bid',
        field: 'bid',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['bid'] ?? false,
        renderer: (rendererContext) {
          return Text(
            rendererContext.cell!.value.toString(),
            style: const TextStyle(
              color: Color.fromARGB(255, 0, 128, 255),
            ),
          );
        },
      ),
      PlutoColumn(
        title: 'Ask',
        field: 'ask',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['ask'] ?? false,
        renderer: (rendererContext) {
          return Text(
            rendererContext.cell!.value.toString(),
            style: const TextStyle(
              color: Color.fromARGB(255, 0, 236, 0),
            ),
          );
        },
      ),
      PlutoColumn(
        title: 'Bid, Ask Akt.',
        field: 'bidAskUpdated',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['bidAskUpdated'] ?? false,
      ),
      PlutoColumn(
        title: 'Bid Size',
        field: 'bidSize',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['bidSize'] ?? false,
      ),
      PlutoColumn(
        title: 'Ask Size',
        field: 'askSize',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['askSize'] ?? false,
      ),
      PlutoColumn(
        title: 'Spread',
        field: 'bidAskSpread',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['bidAskSpread'] ?? false,
      ),
      PlutoColumn(
        title: 'Open',
        field: 'open',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['open'] ?? false,
      ),
      PlutoColumn(
        title: 'Last',
        field: 'last',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['last'] ?? false,
      ),
      PlutoColumn(
        title: 'Low',
        field: 'low',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['low'] ?? false,
      ),
      PlutoColumn(
        title: 'High',
        field: 'high',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['high'] ?? false,
      ),
      PlutoColumn(
        title: 'Change',
        field: 'change',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['change'] ?? false,
      ),
      PlutoColumn(
        title: 'Ch. %',
        field: 'changePercent',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['changePercent'] ?? false,
      ),
      PlutoColumn(
        title: 'Prev. Set.',
        field: 'prevSettlement',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['prevSettlement'] ?? false,
      ),
      PlutoColumn(
        title: 'Settlement',
        field: 'settlement',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['settlement'] ?? false,
      ),
      PlutoColumn(
        title: 'Est. Set.',
        field: 'estimatedSettlement',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['estimatedSettlement'] ?? false,
      ),
      PlutoColumn(
        title: 'Interest',
        field: 'openInterest',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['openInterest'] ?? false,
      ),
      PlutoColumn(
        title: 'Volume',
        field: 'accVolume',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['accVolume'] ?? false,
      ),
      PlutoColumn(
        title: 'Rok',
        field: 'contractYear',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['contractYear'] ?? false,
      ),
      PlutoColumn(
        title: 'Měna',
        field: 'currency',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['currency'] ?? false,
      ),
      PlutoColumn(
        title: 'Last Akt.',
        field: 'lastUpdated',
        type: PlutoColumnType.text(),
        width: 80,
        enableColumnDrag: false,
        enableSorting: false,
        enableContextMenu: false,
        enableEditingMode: false,
        hide: hiddenColumns['lastUpdated'] ?? false,
      ),
      PlutoColumn(
          title: 'Akce',
          field: 'actions',
          type: PlutoColumnType.text(),
          enableColumnDrag: false,
          enableSorting: false,
          enableContextMenu: false,
          enableEditingMode: false,
          renderer: (rendererContext) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                IconButton(
                  icon: const Icon(
                    Icons.assessment,
                    color: BrandColors.lightBlue,
                  ),
                  onPressed: () {
                    Navigator.of(context).pushNamed(
                      HistoryPrevSettlementPage.routeName,
                      arguments: rendererContext.cell!.value,
                    );
                  },
                ),
                IconButton(
                  icon: rendererContext.cell!.value.isFavorite
                      ? const Icon(
                          Icons.star,
                          color: BrandColors.lightBlue,
                        )
                      : const Icon(
                          Icons.star_border,
                          color: BrandColors.lightBlue,
                        ),
                  onPressed: () async {
                    if (!rendererContext.cell!.value.isFavorite) {
                      Navigator.of(context).push(MaterialPageRoute(
                        builder: (context) => ContractsDirectoriesPage(
                          tickerSymbol:
                              rendererContext.cell!.value.tickerSymbol,
                        ),
                        fullscreenDialog: true,
                      ));
                    } else {
                      await _toggleFavorite(
                          rendererContext.cell!.value.tickerSymbol!);
                    }
                  },
                )
              ],
            );
          }),
    ];

    return PlutoGrid(
      columns: _columns,
      rows: [
        for (int i = 0; i < _contracts.length; i++) _buildRow(_contracts[i]),
      ],
    );
  }
}

[bosskmk]

I tried state management using Provider, but it didn't work because PlutoGrid's internal state management already exists. It seems that PlutoGrid should be used without a Provider. Using a Provider does not seem to be effective because state management operates in two layers. Of course, it is free to use Provider in other parts other than PlutoGrid.

[bosskmk]

If Provider is used as the parent of PlutoGrid, the entire PlutoGrid is re-rendered, which is very inefficient.

[ZdenekKrcal]

I just need to refresh data in plutoGrid. So how can I do that?

[bosskmk]

Just call stateManager.notifyListeners() after changing columns or rows. If you want to add or delete rows, you can use stateManager.insertRows or stateManager.prependRows, removeRows, removeCurrentRow methods.

https://github.com/bosskmk/pluto_grid/wiki/pluto-state-manager-for-english

https://weblaze.dev/pluto_grid/build/web/#add-and-remove-rows

[bosskmk]

The stateManager has various methods. The source is open so you can check it out. /lib/src/manager/state

[ZdenekKrcal]

I think that I tried stateManager.notifyListeners() but it didn't work. I will try it again.

[ZdenekKrcal]

I added stateManager.notifyListeners() but it doen't work. There is my code:

FutureBuilder<void>(
          future: _contractProvider.fetchExchangeContracts(
            _market.exchangeName,
            _market.commodityType,
            _market.marketCode,
            _type,
          ),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return SizedBox(
                width: _mediaQuery.size.width,
                height: _mediaQuery.size.height,
                child: const Center(
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation(BrandColors.blue),
                  ),
                ),
              );
            }

            if (snapshot.hasError) {
              return SizedBox(
                width: _mediaQuery.size.width,
                height: _mediaQuery.size.height,
                child: Center(
                  child: Text('${snapshot.error}'),
                ),
              );
            }

            if (_contractProvider.contracts.isEmpty) {
              return SizedBox(
                width: _mediaQuery.size.width,
                height: _mediaQuery.size.height,
                child: const Center(
                  child: Text('Žádná data'),
                ),
              );
            }

            _timer = Timer.periodic(const Duration(seconds: 60), (t) async {
              await _contractProvider.fetchExchangeContracts(
                _market.exchangeName,
                _market.commodityType,
                _market.marketCode,
                _type,
              );

              plutoStateManager.notifyListeners();

              print('prices fetched');
              //setState(() {});
            });

            return Consumer<ContractProvider>(
              builder: (context, contractProvider, _) {
                final _contracts = contractProvider.contracts;
                print('rendered table');

                return ContractsTable(
                  contracts: _contracts,
                  toggleFavorite: (String tickerSymbol) async {
                    await contractProvider.toggleFavoriteContract(
                        tickerSymbol, null);
                  },
                  hiddenColumns: contractProvider.contractsColumnsHide,
                  setPlutoStateManager: (PlutoGridStateManager stateM) {
                    plutoStateManager = stateM;
                  },
                );
              },
            );
          })

[bosskmk]

Your example is a fragment and I can't run it. I think there must be a minimum code that I can run to check it.

[ZdenekKrcal]

My example is about situation where I regulary fetch data from server by http request. When data are recieved then it is necessary to refresh PlutoGrid and there is my problem, because it is no possible to redraw data in PlutoGrid by Provider and its Consumer. My solution is using setState() and refresh all page with FutureBuilder now. But it would be great to have simple solution to redraw all PlutoGrid when we have another data during the time.

[lvyandev]

I also encountered this problem when refresh table with plutoGridStateManager.notifyListeners() however, table can be refresh if

stateManager!.removeRows(stateManager.rows);
stateManager!.appendRows(buildRows(dataMap));

It's kinda like notifyListeners won't map changed data to new rows.

#183 is a similar situation, but I don't think UniqueKey is a solution to this.

[LiveRock]

Yes, I would like to have to update PlutoGrid without setState() too. I use stateManager to change value but the cell UI only refresh when setState(). Anyway to circumvent this?

[ZdenekKrcal]

I also encountered this problem when refresh table with plutoGridStateManager.notifyListeners() however, table can be refresh if

stateManager!.removeRows(stateManager.rows);
stateManager!.appendRows(buildRows(dataMap));

It's kinda like notifyListeners won't map changed data to new rows.

#183 is a similar situation, but I don't think UniqueKey is a solution to this.

I will try that solution later. Maybe I will try solution with UniqueKey as well. Thank you.

[devahmedghanim]

i think if there override function to rebuild data grid will resovle this problem like syncfusion

[ZdenekKrcal]

Is there any update? It would be greate to have method for refreshing records in table.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.