Skip to content

PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.

License

Notifications You must be signed in to change notification settings

Heinrich-vanNieuwenhuizen/pluto_grid

 
 

Repository files navigation

PlutoGrid for flutter - v2.5.0

codecov


PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web.
Of course, it works well on Android and IOS.


You can try out various functions and usage methods right away.
All features provide example code.


Check out how to install from the official distribution site.


The documentation has more details.


Please note the changes when changing the version of PlutoGrid you are using.


Report any questions or errors.


Screenshots

Frozen columns on the left and right.

PlutoGrid Nomal


Popup for select list type columns.

PlutoGrid Select Popup


Popup for select date type columns.

PlutoGrid Select Date


Cell renderer.

PlutoGrid Cell renderer


Multi select. (Cells or Rows)

PlutoGrid Multi select


Dual grid. (Moving between grids.)

PlutoGrid Dual grid


A Dark mode.

PlutoGrid Dual grid


Example

Generate the data to be used in the grid.

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'),
    },
  ),
];

Create a grid with the data created above.

  @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);
          }
        ),
      ),
    );
  }

Pluto series

develop packages that make it easy to develop admin pages or CMS with Flutter.


Support

Buy me a coffee


License

MIT

About

PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Dart 97.8%
  • C++ 1.3%
  • CMake 0.5%
  • Ruby 0.2%
  • HTML 0.1%
  • Swift 0.1%