Custom pager or custom pager options

[Alejandro]

Hi im currently using the data grid package and I ran into a problem which is: when the size of the table is lowest than the half of the screen the pager only shows the change page options but not the amount of rows per page dropdown.

Here is the code for the table (The reason behind using a funtion that returns a widget is because I'm using a NavigationRail widget):

Widget tablaFlujo() {
  return Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Checkbox(
            value: mostrar,
            onChanged: (v) {
              setState(() {
                mostrar = v ?? false;
              });
            }
          ),
        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width / 2 - 220,
            child: Stack(children: [
              Column(
                children: [
                  SizedBox(
                    height: MediaQuery.of(context).size.height - 165,
                    child: Card(
                      elevation: 5,
                      child: SfDataGrid(
                        key: _dataGridKey,
                        frozenColumnsCount: mostrar ? 2 : 1,
                        selectionManager: selectionController,
                        onCellDoubleTap: (v) {
                          print(GridDataSource.eventosDac!.eventos[v.rowColumnIndex.rowIndex - 1].folio);
                          showDialog(
                            context: context,
                            builder: (context) {
                              return AlertDialog(
                                title: const Text("Test"),
                                content: Text("Folio: ${GridDataSource.eventosDac!.eventos[v.rowColumnIndex.rowIndex - 1].folio}"),
                              );
                            }
                          );
                        },
                        onColumnResizeStart: (v) {
                          if (v.column.columnName == 'Folio') {
                            return false;
                          }
                          return true;
                        },
                        onColumnResizeUpdate: (v) {
                          setState(() {
                            if (v.column.columnName == "Incidencia") {
                              anchoIncidencia = v.width;
                            }
                            if (v.column.columnName == "Direccion") {
                              anchoDireccion = v.width;
                            }
                          });
                          return true;
                        },
                        rowsPerPage: _rowsPerPage,
                        columnWidthMode: ColumnWidthMode.fill,
                        columnResizeMode: ColumnResizeMode.onResize,
                        allowColumnsResizing: true,
                        source: dataSource,
                        controller: _dataGridController,
                        showCheckboxColumn: mostrar,
                        selectionMode:
                        mostrar ? SelectionMode.multiple : SelectionMode.none,
                        columns: [
                          GridColumn(
                            columnName: 'Folio',
                            width: 90,
                            label: Container(
                              padding: const EdgeInsets.all(8),
                              alignment: Alignment.center,
                              child: const Text(
                                'Folio',
                                overflow: TextOverflow.clip,
                                softWrap: true,
                              ),
                            ),
                          ),
                          GridColumn(
                            columnName: 'Incidencia',
                            minimumWidth: 40,
                            width: anchoIncidencia,
                            label: Container(
                              padding: const EdgeInsets.all(8),
                              alignment: Alignment.centerLeft,
                              child: const Text(
                                'Incidencia',
                                overflow: TextOverflow.clip,
                                softWrap: true,
                              ),
                            ),
                          ),
                          GridColumn(
                            columnName: 'Direccion',
                            minimumWidth: 160,
                            width: anchoDireccion,
                            label: Container(
                              padding: const EdgeInsets.all(8),
                              alignment: Alignment.centerLeft,
                              child: const Text(
                                'Direccion',
                                overflow: TextOverflow.clip,
                                softWrap: true,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Container(
                    height: 75,
                    decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme
                          .surface.withOpacity(0.12),
                      border: Border(
                        top: BorderSide(
                          width: .5,
                          color: Theme.of(context)
                              .colorScheme
                              .onSurface
                              .withOpacity(0.12)
                        ),
                        bottom: BorderSide.none,
                        left: BorderSide.none,
                        right: BorderSide.none
                      )
                    ),
                    child: Align(
                      alignment: Alignment.center,
                      child: SfDataPagerTheme(
                        data: SfDataPagerThemeData(
                          brightness: Theme.of(context).brightness,
                          selectedItemColor: Colors.blue,
                        ),
                        child: SfDataPager(
                          controller: _pagerController,
                          visibleItemsCount: 3,
                          onPageNavigationStart: (index) {
                            setState(() {
                              selectedRows = _dataGridController.selectedRows;
                              selectedRowsCollection[
                                _pagerController.selectedPageIndex.toString()
                              ] = selectedRows.toList();
                              loading = true;
                            });
                          },
                          onPageNavigationEnd: (index) {
                            setState(() {
                              if (selectedRowsCollection.containsKey('$index')) {
                                _dataGridController.selectedRows =
                                    selectedRowsCollection['$index'] ?? [];
                              }
                              loading = false;
                            });
                          },
                          delegate: dataSource,
                          availableRowsPerPage: const <int>[20, 40, 80],
                          pageCount: (_totalRows / _rowsPerPage) + 1,
                          onRowsPerPageChanged: (int? rowsPerPage) async {
                            setState(() {
                              _rowsPerPage = rowsPerPage!;
                              loading = true;
                            });
                            await dataSource.makeRows().whenComplete(() {
                              setState(() {
                                loading = false;
                              });
                            });
                          },
                          direction: Axis.horizontal,
                        ),
                      ),
                    ),
                  )
                ],
              ),
              _loading ?
              Positioned(
                top: 3,
                left: 3,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    color: Colors.black12,
                  ),
                  height: MediaQuery.of(context).size.height - 170,
                  width: MediaQuery.of(context).size.width / 2 - 226,
                  child: Align(
                    alignment: Alignment.center,
                    child: SizedBox(
                      height: 140,
                      width: 200,
                      child: Card(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Row(
                              mainAxisAlignment:
                              MainAxisAlignment.center,
                              children: const [Text("Cargando")],
                            ),
                            const SizedBox(
                              height: 25,
                            ),
                            CircularProgressIndicator(
                              color: Palette.azulObscuroDarkTheme.shade50,
                              strokeWidth: 6,
                            )
                          ],
                        ),
                      ),
                    )
                  )
                ),
              )
              : const SizedBox()
            ]),
          ),
          Column(
            children: [
              SizedBox(
                height: MediaQuery.of(context).size.height - 170,
                child: VerticalDivider(
                  color: Colors.grey.withAlpha(90),
                  thickness: 2,
                  indent: 24,
                  endIndent: 95,
                ),
              ),
            ],
          ),
          Column(
            children: [
              Container(
                width: MediaQuery.of(context).size.width / 2 + 95,
                height: MediaQuery.of(context).size.height - 165,
                child: Card(
                  elevation: 5,
                  child: ListView(
                    children: [
                      Column(
                        children: List.generate(25, (index) {
                          return Center(
                            child: Column(
                              children: [
                                Image.asset('assets/images/stats.png', scale: 1.8,),
                                const SizedBox(
                                  height: 10,
                                ),
                                const Text("Estadística")
                              ],
                            ),
                          );
                        }),
                      )
                    ],
                  )
                ),
              ),
              const SizedBox(
                height: 75,
              )
            ],
          )
        ],
      ),
    ],
  );
}

[Tamilarasan Paranthaman]

Hi Alejandro, 

 

This is the expected behavior of DataGrid. If the width is set as half of the screen, then you need to scroll the data pager widget horizontally to show the drop-down button. By default, you can scroll the data pager by touch. If you need to scroll by mouse also, then wrap the SfDataPager as the child of the scroll configuration and set the PointerDeviceKind.mouse in the scroll behavior. We have prepared the sample for that. Please check the following sample and code snippet. 

 

Code Snippet: 

ScrollConfiguration( 

                        behavior: ScrollConfiguration.of(context) 

                            .copyWith(dragDevices: { 

                          PointerDeviceKind.touch, 

                          PointerDeviceKind.mouse, 

                        }), 

                        child: SfDataPager( 

                          controller: _pagerController, 

                          visibleItemsCount: 1, 

                          delegate: _employeeDataSource, 

                          availableRowsPerPage: const <int>[1, 2, 4], 

                          pageCount: ((_employees.length / _rowsPerPage).ceil()) 

                              .toDouble(), 

                          onRowsPerPageChanged: (int? rowsPerPage) async { 

                            setState(() { 

                              _rowsPerPage = rowsPerPage!; 

                              loading = true; 

                            }); 

                          }, 

                          direction: Axis.horizontal, 

                        ), 

                      ), 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/main-1120065632 

 

We hope this helps. Please let us know if you need any further assistance. 

 

Regards, 

Tamilarasan