Table¶

Data tables display sets of data across rows and columns.

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.

Data tables can contain:

Interactive components (such as chips, image, number, or action)
Non-interactive elements
Tools to query and manipulate data

Main Table¶

DesignImplementation

Expanded(
  child: MainTable(
    source: managePackageDataSource,
    rowsPerPage: _rowsPerPage,
    onCellTap: (DataGridCellTapDetails details) {
      if (details.rowColumnIndex.rowIndex != 0) {
        // TODO implement cell on click.
      }
    },
    columnWidthMode: ColumnWidthMode.auto,
    columns: <GridColumn>[
      ColumnTableId(context: context, value: 'ID'),
      ColumnTableText(context: context, columnName: 'name', value: 'Nama'),
      ColumnTableText(context: context, columnName: 'activePeriod', value: 'Masa aktif', width: double.nan),
      ColumnTableText(context: context, columnName: 'listFitur', value: 'Daftar fitur', width: double.nan),
      ColumnTableText(context: context, columnName: 'description', value: 'Deskripsi'),
      ColumnTableNumber(context: context, columnName: 'price', value: 'Harga'),
      ColumnTableText(context: context, columnName: 'status', value: 'Status', width: AppDimens.size2X * 2),
      ColumnTableText(context: context, columnName: 'tglDibuat', value: 'Tgl dibuat', width: double.nan),
      ColumnTableText(context: context, columnName: 'tglDiubah', value: 'Tgl diubah', width: double.nan),
    ],
  ),
),

Warning

Please wrrap the widget MainTable with Expanded.

Constructors

source the properties is required DataGridSource.
rowsPerPageThe number of rows to show on each page. Default is 15
columns please use the class on path table_custom/columns_table.dart
allowSorting showing button sorting on right title table. default is false.
columnWidthMode default mode is scrollable ColumnWidthMode.fill.
onCellTap it is interaction on click cell.

Paging Table¶

DesignImplementation

PagingTable(
  source: managePackageDataSource,
  pageCount: managePackageDataSource.orders.length / _rowsPerPage,
),

Constructors

source the properties is required DataGridSource.
pageCount for default is data grid / per page.

Columns Table¶

Use Column Table in columns.

Column ID¶

ColumnTableId(context: context, value: 'ID'),

Warning

the [width] : default is 60.0
the [alignment] : default is [Alignment.centerLeft]

Constructors

value defines the title column.

Column Text¶

ColumnTableText(context: context, columnName: 'name', value: 'Nama'),

Warning

the [width] : default is 240.0 and if size [isDesktop] the value [double.nan].
the [alignment] : default is [Alignment.centerLeft]

Constructors

columnName defines the name of column. Text type Required lowercase.
value defines the title column.

Column Number¶

ColumnTableNumber(context: context, columnName: 'price', value: 'Harga'),

Warning

the [width] : default is 60.0
the [alignment] : default is [Alignment.centerLeft]

Constructors

columnName defines the name of column. Text type Required lowercase.
value defines the title column.

Column Action¶

ColumnTableAction(context: context, columnName: 'price', value: 'Harga'),

Warning

the [width] : default is 240.0 and if size [isDesktop] the value [double.nan]
the [alignment] : default is [Alignment.center]

Constructors

columnName defines the name of column. Text type Required lowercase.
value defines the title column.

Grid Source¶

For more information please learn syncfusion_flutter_datagrid.

DataGridSource is used to obtain the row data for the SfDataGrid. So, create the data source from the DataGridSource and override the following APIs in it:

class LogUsersDataGridSource extends DataGridSource {
  LogUsersDataGridSource(
      {this.orderDataCount, this.ordersCollection, bool? isFilteringSample}) {
    this.isFilteringSample = isFilteringSample ?? false;
    orders = ordersCollection ?? getOrders(orders, orderDataCount ?? 100);
  }

  int? orderDataCount;
  final math.Random _random = math.Random();
  List<LogUsersModel> orders = <LogUsersModel>[];
  List<LogUsersModel>? ordersCollection;
  List<DataGridRow> dataGridRows = <DataGridRow>[];
  late bool isFilteringSample;

  @override
  List<DataGridRow> get rows => orders.map<DataGridRow>((LogUsersModel order) {
        return DataGridRow(cells: <DataGridCell>[
          DataGridCell<int>(columnName: getColumnName('id'), value: order.id),
          DataGridCell<String>(
              columnName: getColumnName('image'), value: order.image),
          DataGridCell<String>(
              columnName: getColumnName('name'), value: order.name),
          DataGridCell<String>(
              columnName: getColumnName('condition'), value: order.condition),
          DataGridCell<String>(
              columnName: getColumnName('typeDevice'), value: order.typeDevice),
          DataGridCell<String>(
              columnName: getColumnName('addressIp'), value: order.addressIp),
          DataGridCell<String>(
              columnName: getColumnName('method'), value: order.method),
          DataGridCell<String>(
              columnName: getColumnName('role'), value: order.role),
          DataGridCell<String>(
              columnName: getColumnName('tgl'), value: order.tgl),
        ]);
      }).toList();

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    final int rowIndex = dataGridRows.indexOf(row);
    Color backgroundColor = AppColors.white;
    if ((rowIndex % 2) == 0) {
      backgroundColor = AppColors.grey.shade50;
    }

    return DataGridRowAdapter(
      color: backgroundColor,
      cells: <Widget>[
        RowTableBasic(
            tableType: TableType.text,
            value: row.getCells()[0].value.toString()),
        RowTableUser(
            avatarUrl: row.getCells()[1].value.toString(),
            value: row.getCells()[2].value.toString()),
        RowTableBasic(
            tableType: TableType.text,
            value: row.getCells()[3].value.toString()),
        RowTableBasic(
            tableType: TableType.text,
            value: row.getCells()[4].value.toString()),
        RowTableBasic(
            tableType: TableType.text,
            value: row.getCells()[5].value.toString()),
        RowTableBasic(
            tableType: TableType.chip,
            chipColor: AppColors.red,
            value: row.getCells()[6].value.toString()),
        RowTableBasic(
            tableType: TableType.chip,
            chipColor: AppColors.purple,
            value: row.getCells()[7].value.toString()),
        RowTableBasic(
            tableType: TableType.text,
            value: row.getCells()[8].value.toString()),
      ],
    );
  }
}

Constructors

rows Fetches the rows available for data population. Also, it is used to fetch the corresponding data object to process the selection. This contains the collection of DataGridRow where each row contains the collection of DataGridCell. Each cell should have the cell value in value property. value is used to perform the sorting for columns.
buildRow Fetches the widget for each cell with DataGridRowAdapter.

Rows Table¶

Please override class Table Grid Source with DataGridSource and implement in the function buildRow. For more information please open file path widget/global/list_row_table.

Basic¶

DesignImplementation

// 1
RowTableBasic(tableType: TableType.text, value: row.getCells()[0].value.toString()),

// 2  
RowTableBasic(tableType: TableType.number, value: row.getCells()[0].value.toString()),

// 3 
RowTableBasic(tableType: TableType.chip, chipColor: AppColors.purple, value: row.getCells()[0].value.toString()),

// 3 
RowTableBasic(tableType: TableType.link, value: row.getCells()[0].value.toString()),

Constructors

tableType defines type of Row table. For option is [Text, Number, Chip and Link]. Default is TableType.text.
value defines the velue of index Cell.
chipColor it is color chip, the chipColor required [tableType] is [TableType.chip]

Rows User¶

DesignImplementation

RowTableUser(avatarUrl: row.getCells()[1].value.toString(), value: row.getCells()[2].value.toString()),

Constructors

value defines the velue of index Cell.
avatarUrl defines the avatar link on left title.

Rows Action¶

DesignImplementation

RowTableAction(
  actions: [
    IconTable(
      icon: const Icon(Icons.link_outlined),
      color: AppColors.blue,
      onPressed: () {
        debugPrint(row.getCells()[2].value.toString());
      },
    ),
    IconTable(
      onPressed: () {
        debugPrint(row.getCells()[2].value.toString());
      },
      icon: const Icon(Icons.delete),
      color: AppColors.red,
    ),
  ],
),

Constructors

action defines action button, the properties need widget IconTable

Support Packages¶

For more information about Table and Pagination used the package syncfusion_flutter_datagrid. For more can be learned in Pub Dev.

Authors: Nanang Prasetya