pluto_grid: Add an Editable Data Grid

A data grid, also known as a spreadsheet, is a data structure that stores tabular data in a two-dimensional array. The rows and columns of the array are indexed by integer coordinates, allowing for efficient access to individual cells. Data grids are popular for storing and manipulating tabular data, such as lists of numbers or strings.

A data grid is a necessary component for any app that manipulates tabular data. By providing a convenient way to access and edit individual cells, data grids make it easy to keep track of your data. They also allow you to perform complex operations on large datasets without having to worry about memory usage.

PlutoGrid is a DataGrid package for any Flutter app. It works well on all platforms. However, it supports the keyboard on desktops and webs. That’s why PlutoGrid is so useful. It lets you use your keyboard to navigate through data grids on a PC.

PlutoGrid provides an easy and efficient way to manage data in Flutter. The package offers a variety of features that allow users to customize the look and feel of the grid, as well as the ability to group columns and freeze certain columns in place. In addition, PlutoGrid also offers support for dark mode and a variety of color schemes.

Example

Install: pluto_grid: ^5.0.1

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

class ExamplePage extends StatefulWidget {
  const ExamplePage({Key? key}) : super(key: key);

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {


  List<PlutoColumn> columns = [
    /// Text Column definition
    PlutoColumn(
      title: 'text column',
      field: 'text_field',
      type: PlutoColumnType.text(),
    ),
    /// Number Column definition
    PlutoColumn(
      title: 'number column',
      field: 'number_field',
      type: PlutoColumnType.number(),
    ),
    /// Select Column definition
    PlutoColumn(
      title: 'select column',
      field: 'select_field',
      type: PlutoColumnType.select(['item1', 'item2', 'item3']),
    ),
    /// Datetime Column definition
    PlutoColumn(
      title: 'date column',
      field: 'date_field',
      type: PlutoColumnType.date(),
    ),
    /// Time Column definition
    PlutoColumn(
      title: 'time column',
      field: 'time_field',
      type: PlutoColumnType.time(),
    ),
  ];

  List<PlutoRow> rows = [
    PlutoRow(
      cells: {
        'text_field': PlutoCell(value: 'Text cell value1'),
        'number_field': PlutoCell(value: 2020),
        'select_field': PlutoCell(value: 'item1'),
        'date_field': PlutoCell(value: '2020-08-06'),
        'time_field': PlutoCell(value: '12:30'),
      },
    ),
    PlutoRow(
      cells: {
        'text_field': PlutoCell(value: 'Text cell value2'),
        'number_field': PlutoCell(value: 2021),
        'select_field': PlutoCell(value: 'item2'),
        'date_field': PlutoCell(value: '2020-08-07'),
        'time_field': PlutoCell(value: '18:45'),
      },
    ),
    PlutoRow(
      cells: {
        'text_field': PlutoCell(value: 'Text cell value3'),
        'number_field': PlutoCell(value: 2022),
        'select_field': PlutoCell(value: 'item3'),
        'date_field': PlutoCell(value: '2020-08-08'),
        'time_field': PlutoCell(value: '23:59'),
      },
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PlutoGrid Demo'),
      ),
      body: Container(
        padding: const EdgeInsets.all(30),
        child: PlutoGrid(
            columns: columns,
            rows: rows,
            onChanged: (PlutoGridOnChangedEvent event) {
              print(event);
            },
            onLoaded: (PlutoGridOnLoadedEvent event) {
              print(event);
            }
        ),
      ),
    );
  }
}