PlutoMenuItem(
  id: 'unique_id',
  title: 'Menu 1',
)

If PlutoMenuItem is created in build method, you should set a unique id for PlutoMenuItem.
Otherwise, when PlutoMenuBar is rebuilt, incorrect actions such as flickering or closing of open menus may occur.
(id must be unique throughout the app.)

class TestWidget extends StatelessWidget {
  const TestWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PlutoMenuBar(menus: [
      PlutoMenuItem(
        id: 'Menu1',
        title: 'Menu1',
      ),
      PlutoMenuItem(
        id: 'Menu2',
        title: 'Menu2',
      ),
    ]);
  }
}

If PlutoMenuItem is created only once in a method such as initState, there is no need to set id.
Even if PlutoMenuBar is rebuilt, PlutoMenuItem is reused.
(The internal PlutoMenuItem.key is not changed.)

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

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  late final List<PlutoMenuItem> menus;

  @override
  void initState() {
    super.initState();

    menus = [
      PlutoMenuItem(title: 'Menu1'),
      PlutoMenuItem(title: 'Menu2'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return PlutoMenuBar(menus: menus);
  }
}

// In case of Mobile
{
  PointerDeviceKind.touch,
  PointerDeviceKind.stylus,
  PointerDeviceKind.invertedStylus,
  PointerDeviceKind.unknown,
}

// In case of desktop
{
  PointerDeviceKind.mouse,
  PointerDeviceKind.trackpad,
  PointerDeviceKind.unknown,
}

Since PointerDeviceKind.mouse is set in Desktop, it is difficult to select the text of PlutoCell by dragging (because it is scrolled by dragging).
In this case, you can customize dragDevices to remove PointerDeviceKind.mouse.

PlutoGrid(
  configuration: const PlutoGridConfiguration(
    scrollbar: PlutoGridScrollbarConfig(
      dragDevices: {
        // PointerDeviceKind.mouse,
        PointerDeviceKind.trackpad,
        PointerDeviceKind.unknown,
      },
    ),
  ),
),

If you remove PointerDeviceKind.mouse from Desktop to remove the drag-to-scroll action, horizontal or vertical scrolling can be done with the scroll bar.
In the case of Desktop, the scroll bar appears when hovering the mouse over the scroll bar area.

One thing to note is that if a custom widget has a state change, such as the Slider in the example below, the state change must be handled by the custom widget. In the example below, if you call setState on the _MyHomePageState widget to change the Slider's value, the entire PlutoMenuBar widget will be rebuilt, which can cause the menu to close as soon as you change the Slider.

// ignore_for_file: avoid_print

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PlutoMenuBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _textEditingController = TextEditingController();

  final _SliderValue _sliderValue = _SliderValue();

  @override
  void initState() {
    super.initState();

    _textEditingController.addListener(_onChangedText);
  }

  @override
  void dispose() {
    _textEditingController.removeListener(_onChangedText);

    _textEditingController.dispose();

    super.dispose();
  }

  void _onChangedText() {
    print(_textEditingController.text);
  }

  void _onChangedSlider(double value) {
    print(value);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PlutoMenuBar(
        mode: PlutoMenuBarMode.hover,
        menus: [
          PlutoMenuItem(
            title: 'CustomWidgets',
            children: [
              PlutoMenuItem.widget(
                widget: _TextField(controller: _textEditingController),
              ),
              PlutoMenuItem.widget(
                widget: _Slider(
                  sliderValue: _sliderValue,
                  onChanged: _onChangedSlider,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _TextField extends StatefulWidget {
  const _TextField({required this.controller});

  final TextEditingController controller;

  @override
  State<_TextField> createState() => _TextFieldState();
}

class _TextFieldState extends State<_TextField> {
  @override
  Widget build(BuildContext context) {
    return TextField(controller: widget.controller);
  }
}

class _SliderValue {
  double value = 0;
}

class _Slider extends StatefulWidget {
  const _Slider({
    required this.sliderValue,
    this.onChanged,
  });

  final _SliderValue sliderValue;

  final void Function(double)? onChanged;

  @override
  State<_Slider> createState() => _SliderState();
}

class _SliderState extends State<_Slider> {
  @override
  Widget build(BuildContext context) {
    return Slider(
      value: widget.sliderValue.value,
      divisions: 5,
      max: 100,
      onChanged: (value) {
        setState(() {
          widget.sliderValue.value = value;
          if (widget.onChanged != null) {
            widget.onChanged!(value);
          }
        });
      },
    );
  }
}

Shortcut Range

The scope of the shortcut depends on the focus.

• PlutoGrid : In the state that TextField is not focused. You can set custom shortcut keys.
• TextField : In case the cell in edit state or TextField of column filtering is focused. You cannot set custom shortcut keys.

Customizable shortcuts in the PlutoGrid range

• ArrowKeys: Moves the focus of the current cell up, down, left and right.
• Shift + ArrowKeys : Moves a cell or row up, down, left and right to select.
• PageUp/Down : Moves the focus of the current cell up and down by page unit.
• Shift + PageUp/Down : Moves cells or rows up and down and selects in units of pages.
• Alt + PageUp/Down : Moves the current page when pagination is enabled.
• Tab or Shift + Tab : Moves the focus of the current cell to the left or right. If you hit the left and right ends, set PlutoGridConfiguration.tabKeyAction to moveToNextOnEdge to continue moving.
• Enter or Shift + Enter : Sets the current cell to edit state or calls the PlutoGrid.onSelected callback if PlutoGird is in selection mode. Additional actions can be set with PlutoGridConfiguration.enterKeyAction.
• Escape: When PlutoGird is in selection mode, PlutoGrid.onSelected is called with PlutoGridOnSelectedEvent containing a null value which means cancel the selection. In the non-selection mode, the edit state of the cell is canceled.
• Home or End: Moves the focus of the current cell to the left and right ends.
• Control + Home/End : Moves the focus of the current cell up and down.
• Shift + Home/End : Select cells all the way to the left or right.
• Control + Shift + Home/End : Select a cell or row all the way up, down, left, and right.
• F2 : Set the cell to the edit state. In case of date, time, or selection type column, the popup is called.
• F3 : If the current cell is in the focused state, the focus moves to the column filter of the current cell. This function is valid only when column filter is enabled with PlutoGridStateManager.setShowColumnFilter. If the F3 key is pressed once again while the focus is moved to the column filter, the column filter pop-up is called. Also, if you press the Escape key in the column filter focus, the focus is moved to the cell before moving.
• F4 : Toggles column sorting. Only valid if PlutoColumn.enableSorting is enabled.
• Control + C : Copies the values ​​of the current cell or row or the selected cell or row to the clipboard.
• Control + V : Paste values ​​into the current cell or row or the selected cell or row.
• Control + A : Select all cells or rows.

How to set custom shortcut keys

PlutoGrid(
  configuration: PlutoGridConfiguration(
    shortcut: PlutoGridShortcut(
      actions: {
        // This is a Map with basic shortcut keys and actions set.
        ...PlutoGridShortcut.defaultActions,
        // You can override the enter key behavior as below.
        LogicalKeySet(LogicalKeyboardKey.enter): CustomEnterKeyAction(),
      },
    ),
  ),
);

// Create a new class that inherits from PlutoGridShortcutAction
// If the execute method is implemented, 
// the implemented method is executed when the enter key is pressed.
class CustomEnterKeyAction extends PlutoGridShortcutAction {
  @override
  void execute({
    required PlutoKeyManagerEvent keyEvent,
    required PlutoGridStateManager stateManager,
  }) {
    print('Pressed enter key.');
  }
}

If you have any questions or need to add features, please register on GitHub. PlutoGrid Github

Default container PlutoLayoutContainer

You need to set the body container by default, and you can optionally add containers to the top, bottom, left, and right sides.

final layout = PlutoLayout(
  body: PlutoLayoutContainer(
    child: Text('body container'),
  ),    
  top: PlutoLayoutContainer(
    child: Text('top container'),
  ),
  bottom: PlutoLayoutContainer(
    child: Text('bottom container'),
  ),
  left: PlutoLayoutContainer(
    child: Text('left container'),
  ),
  right: PlutoLayoutContainer(
    child: Text('right container'),
  ),
);

Tab Widgets PlutoLayoutTabs

The tab widget consists of a menu button and a tab view area that is opened or closed when the menu button is toggled.

final layout = PlutoLayout(
  // This is a property that should be set by default. 
  // It is centered in the layout.
  body: PlutoLayoutContainer(
    child: Text('body container'),
  ),
  // This is an attribute that can be optionally added.
  left: PlutoLayoutContainer(
    child: PlutoLayoutTabs(
      // This property sets the size of the tab view.
      // If the size of the tab view is left or right, it means the width.
      // In the case of top and bottom, it means the height.
      // In this example code, the left property is set, 
      // so the size means the width.
      tabViewSizeResolver: PlutoLayoutTabViewSizeConstrains(
        minSize: 100,
        maxSize: 500,
        initialSize: 300,
      ),
      items: [
        PlutoLayoutTabItem(
          id: 'Files',
          title: 'Files',
          icon: Icon(Icons.file_present),
          // This property sets the size of each tab view.
          // If the size of each tab view is left or right, it means the height.
          // In the case of top and bottom, it means the width.
          // In this example code, the left property is set, 
          // so size means height.
          sizeResolver: PlutoLayoutTabItemSizeFlexible(0.3),
          // This is a callback function that returns a widget 
          // that is displayed when the tab menu button is tapped.
          tabViewWidget: Text('Files tab view'),
        ),
        PlutoLayoutTabItem(
          id: 'Users',
          title: 'Users',
          icon: Icon(Icons.account_box),
          sizeResolver: PlutoLayoutTabItemSizeFlexible(0.7),
          tabViewWidget: Text('Users tab view'),
        ),
      ],
    ),
  ),
);

Additional explanation of tab widget size setting

The size of the tab view that appears when the menu of the tab widget is toggled depends on the direction in which the tab widget is positioned.
In the case of left and right tabs, the size of the tab view means the width.
For top and bottom tabs, the size of the tab view means the height.
Here, a tab view means a container that wraps all tab items.

Also, in the case of the size of the tab view of each item,
In the case of left and right tabs, the size of the tab view of each item means the height.
In the case of top and bottom tabs, the size of the tab view of each item means the width.

Size of TabViewSize

• The size of TabViewSize is set by adding tabViewSizeResolver property of PlutoLayoutTabs.
  If not set, the size is automatically set to fit the screen size.
• Set PlutoLayoutTabViewSizeFixed and PlutoLayoutTabViewSizeRatio to a fixed size.
  Once set, the size cannot be changed, and when the size of the parent widget of PlutoLayout is changed, the size may change automatically.
• PlutoLayoutTabViewSizeConstrains can limit the minimum and maximum sizes, and you can also set the default size.
  You can change the size after it is set.

Size of TabViewItemSize

• The size of TabViewItemSize is set by adding the sizeResolver property of each PlutoLayoutTabItem. If not set, PlutoLayoutTabItemSizeFlexible is set to a value of 1.
• PlutoLayoutTabItemSizeFlexible can pass a value between 0 and 1, and will be set to 1 if not passed. When two items are activated, assuming that both items have a value of 1, the size is set in a ratio of 1:1.
• PlutoLayoutTabItemSizeInitial sets the initial size when the tab item is activated.

Shortcut settings

Shortcuts work with Flutter's Shortcuts widget. You can pass desired shortcuts and Actions to the shortcuts property of PlutoLayout.

final layout = PlutoLayout(
  shortcuts: {
    // Pressing the Escape key closes all currently open tab views.
    LogicalKeySet(LogicalKeyboardKey.escape):
        PlutoLayoutActions.hideAllTabView(),
    // When Alt + Number 1 is pressed, 
    // the items registered in the left tab are opened and closed in order.
    LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit1):
        PlutoLayoutActions.rotateTabView(
      PlutoLayoutContainerDirection.left,
    ),
    // If you press Alt + Number 2, 
    // the items registered in the right tab are opened and closed in order.
    LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.digit2):
        PlutoLayoutActions.rotateTabView(
      PlutoLayoutContainerDirection.right,
    ),
    // Press Alt + Right Arrow to increase the size 
    // of the currently focused tab view.
    // The reverseByDirection property is a property to change 
    // the width according to the logic according to the left or right tab view.
    // For example, in the case of the left tab view, 
    // we want to increase it by pressing the right arrow key.
    // But in the case of the right tab view, 
    // we want it to be decreased when the right arrow key is pressed.
    // Each shortcut can be assigned, 
    // but if you need to increase/decrease according to the logic with one shortcut
    // Just set the reverseByDirection property to true.
    LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowRight):
        PlutoLayoutActions.increaseTabView(reverseByDirection: true),
    // Press Alt + Left arrow key to decrease the size of the currently focused tab view.
    LogicalKeySet(LogicalKeyboardKey.alt, LogicalKeyboardKey.arrowLeft):
        PlutoLayoutActions.decreaseTabView(reverseByDirection: true),
  },
  body: PlutoLayoutContainer(
    child: Text('body container'),
  ),
);

If you have additional questions or features that need to be added, please register in the GitHub issue.
PlutoLayout Github

normal mode

As a basic mode, there are no restrictions on editing and operation.

readOnly mode

In this mode, cell editing is restricted.

select or selectWithOneTap mode

This mode is for single row selection. When a row is selected, the PlutoGrid.onSelected callback is called.
In select mode, the PlutoGrid.onSelected callback is called only when the currently selected row is tapped or the enter key is pressed.
The selectWithOneTap mode will call the PlutoGrid.onSelected callback when a row is tapped, regardless of whether a row is currently selected or not.
The selected row is passed as the row, rowIdx,cellvalues ​​of theonSelected` callback.

multiSelect mode

This mode is for selecting multiple rows. You can select or deselect rows with a single tap.
You can also select rows with the keyboard shift + arrowUp/Down, shift + tap, control + tap, etc.
However, when selecting a row with the keyboard, the PlutoGrid.onSelected callback is called only when the enter key is pressed.
Selected rows are listed in the List<PlutoRow>? passed as the selectedRows value.
Typing escape will undo all selected rows. In this case, selectedRows returns null.

The mode can be changed to setState of StatefulWidget as shown below.

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

import '../dummy_data/development.dart';

class EmptyScreen extends StatefulWidget {
  static const routeName = 'empty';

  const EmptyScreen({Key? key}) : super(key: key);

  @override
  _EmptyScreenState createState() => _EmptyScreenState();
}

class _EmptyScreenState extends State<EmptyScreen> {
  late List<PlutoColumn> columns;

  late List<PlutoRow> rows;

  late PlutoGridStateManager stateManager;

  PlutoGridMode mode = PlutoGridMode.normal;

  @override
  void initState() {
    super.initState();

    final dummyData = DummyData(5, 5);

    columns = dummyData.columns;

    rows = dummyData.rows;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(15),
          child: PlutoGrid(
            mode: mode,
            columns: columns,
            rows: rows,
            onChanged: (PlutoGridOnChangedEvent event) {
              print(event);
            },
            onLoaded: (PlutoGridOnLoadedEvent event) {
              stateManager = event.stateManager;
            },
            createHeader: (s) => TextButton(
              onPressed: () {
                setState(() {
                  mode = mode.isNormal == true
                      ? PlutoGridMode.readOnly
                      : PlutoGridMode.normal;
                });
              },
              child: const Text('Change mode'),
            ),
            configuration: const PlutoGridConfiguration(),
          ),
        ),
      ),
    );
  }
}

The pagination method used in the DB structure where the total number of pages is known and the infinite scroll method used in the DB structure where the total number of pages is unknown.

Demo links

PlutoLazyPagination
https://weblaze.dev/pluto_grid/build/web/#feature/row-lazy-pagination
PlutoInfinityScrollRows
https://weblaze.dev/pluto_grid/build/web/#feature/row-infinity-scroll

PlutoLazyPagination

This is a pagination widget.
Return a PlutoLazyPagination widget to the createFooter callback of PlutoGrid as shown below.
Pagination widget is created at the bottom of PlutoGrid.

final columns = [
  PlutoColumn(
    title: 'Column', 
    field: 'column', 
    type: PlutoColumnType.text()
  ),
];

// Pass an empty list to PlutoGrid.
// After PlutoGrid is loaded, page 1 is automatically called.
// initialPage defaults to 1, initialFetch defaults to true, if you change this
// You can change the page to be loaded first or set not to load the page first.
final rows = [];

PlutoGrid(
  columns: columns,
  rows: rows,
  createFooter: (stateManager) {
    return PlutoLazyPagination(
      // Determine the first page.
      // Default is 1.
      initialPage: 1,

      // First call the fetch function to determine whether to load the page.
      // Default is true.
      initialFetch: true,

      // Decide whether sorting will be handled by the server.
      // If false, handle sorting on the client side.
      // Default is true.
      fetchWithSorting: true,

      // Decide whether filtering is handled by the server.
      // If false, handle filtering on the client side.
      // Default is true.
      fetchWithFiltering: true,

      // Determines the page size to move to the previous and next page buttons.
      // Default value is null. In this case,
      // it moves as many as the number of page buttons visible on the screen.
      pageSizeToMove: null,

      // Implement a callback function to get data from the server. explained below.
      fetch: fetch, 
      stateManager: stateManager,
    );
  },
)

Implementation description of fetch function of PlutoLazyPagination

// Referring to the request data of the PlutoLazyPaginationRequest type,
// Implement a function that returns a PlutoLazyPaginationResponse response value.
Future<PlutoLazyPaginationResponse> fetch(
  PlutoLazyPaginationRequest request,
) async {
  String queryString = '?page=${request.page}';

  // If filtering is applied, there is at least one element in request.filterRows .
  if (request.filterRows.isNotEmpty) {
    // request.filterRows is a List<PlutoRow> type and contains filtering information.
    final filterMap = FilterHelper.convertRowsToMap(request.filterRows);
    // Assume that the column has two filters, 123 and a, as a Contains type filter.
    // {column: [{Contains: 123}, {Contains: a}]}
    for (final filter in filterMap.entries) {
      for (final type in filter.value) {
        queryString += '&filter[${filter.key}]';
        final filterType = type.entries.first;
        queryString += '[${filterType.key}][]=${filterType.value}';
      }
    }
  }

  // If a column in a sorted state exists.
  if (request.sortColumn != null && !request.sortColumn!.sort.isNone) {
    queryString += '&sort=${request.sortColumn!.field},${request.sortColumn!.sort.name}';
  }

  // Make API requests with queryString.
  print(queryString);
  // ?page=10&filter[column][Contains][]=123&filter[column][Contains][]=a&sort=column,ascending
  final dataFromServer = await Future.value("""
    {
      "totalPage": 10,
      "data": [
        {
          "column": "value 1"
        },
        {
          "column": "value 2"
        }
      ]
    }
    """);

  // Converts the json format received from the server to the Map format.
  final parsedData = jsonDecode(dataFromServer);

  // Create a PlutoRow.
  final rows = parsedData.data.map<PlutoRow>((rowData) {
    return PlutoRow.fromJson(rowData);
  });

  return PlutoLazyPaginationResponse(
    totalPage: parsedData['totalPage'],
    rows: rows.toList(),
  );
}

PlutoInfinityScrollRows

It is an infinite scrolling widget.
Return the PlutoInfinityScrollRows widget to the createFooter callback of PlutoGrid as shown below.
No widgets are created at the bottom of the PlutoGrid. (Created by SizedBox.shrink.)
No widgets need to be added, but if you need it for a special case, please ask.
I will update the function to add widgets.

final columns = [
  PlutoColumn(
    title: 'Id', 
    field: 'id', 
    type: PlutoColumnType.text()
  ),
  PlutoColumn(
    title: 'Name', 
    field: 'name', 
    type: PlutoColumnType.text()
  ),
];

// Pass an empty list to PlutoGrid.
// Call the fetch function automatically after PlutoGrid is loaded.
// initialFetch default value is true, if you change this
// You can set it not to load the page at first.
final rows = [];

PlutoGrid(
  columns: columns,
  rows: rows,
  createFooter: (stateManager) => PlutoInfinityScrollRows(
    // First call the fetch function to determine whether to load the page.
    // Default is true.
    initialFetch: true,

    // Decide whether sorting will be handled by the server.
    // If false, handle sorting on the client side.
    // Default is true.
    fetchWithSorting: true,

    // Decide whether filtering is handled by the server.
    // If false, handle filtering on the client side.
    // Default is true.
    fetchWithFiltering: true,

    // Implement a callback function to get data from the server. explained below.
    fetch: fetch,
    stateManager: stateManager,
  ),   
)

Implementation description of fetch function of PlutoInfinityScrollRows

Future<PlutoInfinityScrollRowsResponse> fetch(
 PlutoInfinityScrollRowsRequest request,
) async {
  String queryString = '?';

  // If lastRow is null, the first page can be loaded from the server.
  // If lastRow is present, add the user's unique value to the querystring.
  if (request.lastRow == null) {
    queryString += 'lastId=';
  } else {
    queryString += 'lastId=${request.lastRow!.cells['id']}';
  }

  // At least one element is present in request.filterRows if filtering is applied.
  if (request.filterRows.isNotEmpty) {
    // request.filterRows is a List<PlutoRow> type and contains filtering information.
    final filterMap = FilterHelper.convertRowsToMap(request.filterRows);
    // Assume that two filters, mike and jessi, are set as a Contains type filter in name.
    // {name: [{Contains: mike}, {Contains: jessi}]}
    for (final filter in filterMap.entries) {
      for (final type in filter.value) {
        queryString += '&filter[${filter.key}]';
        final filterType = type.entries.first;
        queryString += '[${filterType.key}][]=${filterType.value}';
      }
    }
  }

  // If a column in a sorted state exists.
  if (request.sortColumn != null && !request.sortColumn!.sort.isNone) {
    queryString += '&sort=${request.sortColumn!.field},${request.sortColumn!.sort.name}';
  }

  // Make API requests with queryString.
  print(queryString);
  // ?lastId=&filter[name][Contains][]=mike&filter[name][Contains][]=jessi&sort=name,ascending
  final dataFromServer = await Future.value("""
  {
    "isLast": false,
    "data": [
      {
        "id": 1,
        "name": "mike"
      },
      {
        "id": 2,
        "name": "jessi"
      }
    ]
  }
  """);

  // Convert the json format received from the server into Map format.
  final parsedData = jsonDecode(dataFromServer);

  // Include whether this is the last page when the server responds with data.
  final bool isLast = parsedData['isLast'];

  // Create a PlutoRow.
  final rows = parsedData.data.map<PlutoRow>((rowData) {
    return PlutoRow.fromJson(rowData);
  });

  // If this is the last page, you can notify the user with a message.
  if (isLast && mounted) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Last Page!')),
    );
  }

  return PlutoInfinityScrollRowsResponse(
    isLast: isLast,
    rows: rows.toList(),
  );
}

Additional comments in common

• When sorting and filtering events occur, the fetch callback requests the first page.
  PlutoLazyPagination is page = 1
PlutoInfinityScrollRows is lastRow = null
  This is because a sorting or filtering event must show the user new data with sorting and filtering applied.
  In some cases, sorting or filtering can be handled client-side rather than being handled by the server.
  fetchWithSorting = false, fetchWithFiltering = false
  In this case, it is sorted or filtered based on the currently existing rows.
• The existing stateManager.setPage operation is not valid.
  The way it is handled by the server does not have a separate page state internally in PlutoGrid.
  You do the paging inside the PlutoLazyPagination or PlutoInfinityScrollRows widget.
  Therefore, page changes or additions are handled by deleting and inserting all existing rows of PlutoGrid.
  A separate implementation is required if client-side caching handling is required. This is not yet to be considered, please comment on the GitHub issue and I will consider handling caching.
• When data is fetched from the server, it is common that filtering and sorting are not applied to all columns.
  There are properties that can prevent filtering and sorting of certain columns.
  enableSorting, enableFilterMenuItem in PlutoColumn.
  You may also need a single filtering input rather than a filtering input for each column. In this case, a separate UI is not provided. If necessary, please suggest it to a GitHub issue and I will consider adding it.
• The loading screen uses an internal loading widget.
  A custom loading UI is not yet available. If necessary, please comment on a github issue and I will consider adding it.
• When creating a return value by fetching data from the server and creating a PlutoRow, you need to pay attention to the PlutoColumn.field value.
  The field passed to columns in PlutoGrid must match.
  PlutoRow.cells is of type Map<String, PlutoCell>, and the part corresponding to String should be PlutoColumn.field.

If you have more questions, please contact us through the GitHub issue. https://github.com/bosskmk/pluto_grid

Group by column

Rows are grouped by grouping cell values ​​based on a specified column.
PlutoRows are automatically grouped by cell value without the user having to group them.

// In the onLoaded callback of PlutoGrid, set the delegate as shown below.
onLoaded: (e) => e.stateManager.setRowGroup(PlutoRowGroupByColumnDelegate(
  columns: [
    e.stateManager.columns[0],
    e.stateManager.columns[1],
  ],
  // Decide whether to display the expand/collapse buttons in the first cell.
  // To set this value to true when grouped by column,
  // You need to hide the columns except for the first column.
  // stateManager.hideColumns(stateManager.columns[1]);
  // If this value is false, expand/collapse buttons are displayed to fit the column depth.
  showFirstExpandableIcon: false,
  // Decide whether to display the number of sub-rows of the grouped column in the cell.
  showCount: true,
  // Decide whether to display a summary when displaying the number of sub-rows.
  // ex) 1,234,567 > 1.2M
  enableCompactCount: true,
)),

Tree structure grouping

Rows are grouped by user-defined criteria.
User needs to group PlutoRows and pass them to PlutoGrid.

// Set the type of PlutoRow to group as shown below,
// Grouping rows should be delivered to rows of PlutoGrid.
// The type of every row does not have to be group.
PlutoRow(
  cells: {'files': PlutoCell(value: 'PlutoGrid')},
  type: PlutoRowType.group(
      children: FilteredList<PlutoRow>(
    initialList: [
      PlutoRow(
        cells: {'files': PlutoCell(value: 'lib')},
        type: PlutoRowType.group(
          children: FilteredList<PlutoRow>(
            initialList: [
              PlutoRow(
                cells: {'files': PlutoCell(value: 'src')},
                type: PlutoRowType.group(
                    children: FilteredList<PlutoRow>(
                  initialList: [
                    PlutoRow(cells: {
                      'files': PlutoCell(value: 'pluto_grid.dart')
                    }),
                    PlutoRow(cells: {
                      'files': PlutoCell(value: 'pluto_dual_grid.dart')
                    }),
                  ],
                )),
              ),
            ],
          ),
        ),
      ),
      PlutoRow(
        cells: {'files': PlutoCell(value: 'test')},
        type: PlutoRowType.group(
          children: FilteredList<PlutoRow>(
            initialList: [
              PlutoRow(
                cells: {
                  'files': PlutoCell(value: 'pluto_grid_test.dart')
                },
              ),
            ],
          ),
        ),
      ),
    ],
  )),
),
PlutoRow(
  cells: {'files': PlutoCell(value: 'PlutoMenuBar')},
  type: PlutoRowType.group(
      children: FilteredList<PlutoRow>(
    initialList: [
      PlutoRow(
        cells: {'files': PlutoCell(value: 'pluto_menu_bar.dart')},
      ),
    ],
  )),
),

// In the onLoaded callback of PlutoGrid, set the delegate as shown below.
onLoaded: (e) => e.stateManager.setRowGroup(PlutoRowGroupTreeDelegate(
  // Determine the depth of the column.
  // Basically, the order in which the columns are displayed on the screen is the column depth.
  // Pass the settings below as default.
  resolveColumnDepth: (column) => e.stateManager.columnIndex(column),
  // Determines whether the cell's text is visible.
  // If true is returned, the text of all cells is shown.
  // If you want to hide the text of a specific cell,  
  // you can define the return value of the cell with a specific condition as false.
  showText: (cell) => true,
  // Decide whether to display the expand/collapse buttons in the first cell.
  // If this value is false, expand/collapse buttons are displayed to fit the column depth.
  showFirstExpandableIcon: true,
  // Decide whether to display the number of sub-rows of the grouped column in the cell.
  showCount: true,
  // Decide whether to display a summary when displaying the number of sub-rows.
  // ex) 1,234,567 > 1.2M
  enableCompactCount: true,
)),

Groupby columns dynamically

The example below dynamically processes group-by columns by adding the to Group, unGroup buttons to the right menu of the column.

PlutoGrid(
  columns: columns,
  rows: rows,
  onLoaded: (PlutoGridOnLoadedEvent event) {
    stateManager = event.stateManager;
    stateManager.setRowGroup(
      // First, the columns of the PlutoRowGroupByColumnDelegate 
      // start with an empty list.
      PlutoRowGroupByColumnDelegate(
        columns: [],
      ),
    );
  },
  // Set a custom column menu delegate to add a button to the column menu.
  columnMenuDelegate: _CustomColumnMenuDelegate(),
),

class _CustomColumnMenuDelegate implements PlutoColumnMenuDelegate {
  final PlutoColumnMenuDelegateDefault defaultDelegate =
      const PlutoColumnMenuDelegateDefault();

  bool isGroupColumn(PlutoGridStateManager stateManager, PlutoColumn column) {
    return (stateManager.rowGroupDelegate as PlutoRowGroupByColumnDelegate)
        .columns
        .contains(column);
  }

  @override
  List<PopupMenuEntry<dynamic>> buildMenuItems({
    required PlutoGridStateManager stateManager,
    required PlutoColumn column,
  }) {
    final Color textColor = stateManager.style.cellTextStyle.color!;

    final groupColumn = isGroupColumn(stateManager, column);

    return [
      ...defaultDelegate.buildMenuItems(
          stateManager: stateManager, column: column),
      PopupMenuItem<dynamic>(
        value: groupColumn ? _CustomMenuItem.unGroup : _CustomMenuItem.toGroup,
        height: 36,
        enabled: true,
        child: Text(
          groupColumn ? 'unGroup' : 'toGroup',
          style: TextStyle(
            color: textColor,
            fontSize: 13,
          ),
        ),
      ),
    ];
  }

  @override
  void onSelected({
    required BuildContext context,
    required PlutoGridStateManager stateManager,
    required PlutoColumn column,
    required bool mounted,
    required selected,
  }) {
    if (selected is PlutoGridColumnMenuItem) {
      defaultDelegate.onSelected(
        context: context,
        stateManager: stateManager,
        column: column,
        mounted: mounted,
        selected: selected,
      );
    } else if (selected is _CustomMenuItem) {
      switch (selected) {
        case _CustomMenuItem.toGroup:
          stateManager.setRowGroup(PlutoRowGroupByColumnDelegate(columns: [
            ...(stateManager.rowGroupDelegate as PlutoRowGroupByColumnDelegate)
                .columns,
            column,
          ]));
          stateManager.updateVisibilityLayout();
          break;
        case _CustomMenuItem.unGroup:
          stateManager.setRowGroup(PlutoRowGroupByColumnDelegate(columns: [
            ...(stateManager.rowGroupDelegate as PlutoRowGroupByColumnDelegate)
                .columns
                .where((e) => e.field != column.field),
          ]));
          stateManager.updateVisibilityLayout();
          break;
      }
    }
  }
}

enum _CustomMenuItem {
  toGroup,
  unGroup,
}

Bottom aggregate column in grouping state

https://weblaze.dev/pluto_grid/build/web/#feature/column-footer
When adding an aggregate column at the bottom of the link above, you can set the groupedRowType property to set the conditions for the rows to be included in the aggregation in the grouping state.

columns[0].footerRenderer = (c) {
  return PlutoAggregateColumnFooter(
    rendererContext: c,
    type: PlutoAggregateColumnType.count,
    // The groupedRowType property takes effect when rows are grouped.
    groupedRowType: PlutoAggregateColumnGroupedRowType.rows,
    format: 'CheckedCount : #,###',
    alignment: Alignment.center,
    filter: (cell) => cell.row.checked == true,
  );
};

// Include all groups and rows in the aggregation.
PlutoAggregateColumnGroupedRowType.all
// Include groups and rows excluding collapsed sub-rows in the aggregation.
PlutoAggregateColumnGroupedRowType.expandedAll
// Include rows excluding group rows in the aggregation.
PlutoAggregateColumnGroupedRowType.rows
// Include expanded rows excluding group rows in the aggregate.
PlutoAggregateColumnGroupedRowType.expandedRows

Restrictions

• In version 5.2.0, the drag function of the row in the grouping state is not yet supported.
• If a row is added when grouped by column, if there is a duplicate value according to the cell value of the row being added, it is included in the existing group. Otherwise, a new group is added.

Web demo link

https://weblaze.dev/pluto_grid/build/web/#feature/row-group

A link to a live demo where you can see PlutoLayout in action on the web.

[Done] Grouping of rows structured by columns

• Group multiple rows by column. (2 columns in the image)
• Dynamically change or ungroup grouping status
• Add or delete rows while grouped (multi-select possible)

[Done] Sort in grouped state

• Sort rows while maintaining group status

[Done] Filtering in grouped state

• Filter rows while maintaining group status

[Done] Pagination in grouped state

• Pagination while maintaining group status

[Development] Drag and move rows in a grouped state

As in the image above, in the previous version, drag the selected row to move it. However, complex planning needs to be considered when trying to select and drag a specific row in a grouped state as shown in the image below.

As in the image above, when the user tries to move selected specific rows by dragging, the row must be moved according to the grouped state.

Movement of selected rows in a grouped state

Move all children to another group

• parent should be deleted

Move grouped rows to another parent group

• If the parent group to be moved already has a group with the same key, there is a key conflict problem. The children of the group to be moved must be added as children of an existing group.

Group row discards children and moves to another location

• The children of the group must also move along with the group. (UI considerations as to whether or not to select all children when a group row is selected)

Group row moves to non-group row position

• After moving the children of the group row, the group must be deleted.

These problems are possible enough for development, but it will be necessary to plan the UI so that there is no confusion such as a group being deleted or an unselected row being moved when a row is moved from the user's point of view.

If you have a good, simple idea, please comment on my GitHub issue. https://github.com/bosskmk/pluto_grid/issues

If this problem is not easily solved with the function of moving the selected row in a grouped state, I plan to distribute only this part in the next version.

Setting up columns and rows when creating a grid

PlutoGrid can set columns and rows in the constructor when creating the first grid as follows.

Note: Do not set columns and rows in the build method when setting columns and rows for the first time.

class DemoScreenState extends State<DemoScreen> {
  final List<PlutoColumn> columns = [];

  final List<PlutoRow> rows = [];

  late PlutoGridStateManager stateManager;

  @override
  void initState() {
    super.initState();

    columns.addAll([
      PlutoColumn(
        title: 'name',
        field: 'name_field',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'age',
        field: 'age_field',
        type: PlutoColumnType.number(),
      ),
    ]);

    rows.addAll([
      PlutoRow(cells: {
        'name_field': PlutoCell(value: 'Mike.'),
        'age_field': PlutoCell(value: 20),
      }),
      PlutoRow(cells: {
        'name_field': PlutoCell(value: 'John.'),
        'age_field': PlutoCell(value: 21),
      }),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    // Do not add columns or rows here.
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(15),
        child: PlutoGrid(
          columns: columns,
          rows: rows,
        ),
      ),
    );
  }
}

Add or remove columns and rows after grid creation

After columns and rows are set in the PlutoGrid constructor, to add or delete columns or rows, you have to do it through PlutoGridStateManager.

PlutoGridStateManager can be delivered through onLoaded callback function when PlutoGrid is created.

late final PlutoGridStateManager stateManager;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      padding: const EdgeInsets.all(15),
      child: PlutoGrid(
        columns: columns,
        rows: rows,
        onLoaded: (event) => stateManager = event.stateManager,
      ),
    ),
  );
}

Through the received PlutoGridStateManager, columns or rows can be added when a callback function such as onTap or stream.listen of the button is called.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        TextButton(
          onPressed: () {
            // Be careful not to duplicate field names when adding columns.
            final int lastIndex = stateManager.refColumns.originalList.length;

            stateManager.insertColumns(0, [
              PlutoColumn(
                title: 'new column $lastIndex',
                field: 'new_field_$lastIndex',
                type: PlutoColumnType.text(),
              )
            ]);
          },
          child: const Text('Add column'),
        ),
        Expanded(
          child: Container(
            padding: const EdgeInsets.all(15),
            child: PlutoGrid(
              columns: columns,
              rows: rows,
              onLoaded: (event) => stateManager = event.stateManager,
            ),
          ),
        ),
      ],
    ),
  );
}

Methods related to adding or removing columns and rows

The methods related to adding and removing columns and rows of PlutoGridStateManager are as follows.

// Add `columns` in place of `columnIdx`.
void insertColumns(int columnIdx, List<PlutoColumn> columns);

// Remove all `columns`.
void removeColumns(List<PlutoColumn> columns);

// Add `rows` in place of `rowIdx`.
void insertRows(
    int rowIdx,
    List<PlutoRow> rows, {
    bool notify = true,
  });

// Add new rows of length `count` before the first row.
void prependNewRows({
  int count = 1,
});

// Add `rows` to the beginning of the first row.
void prependRows(List<PlutoRow> rows);

// Add new rows of length `count` after the last row.
void appendNewRows({
  int count = 1,
});

// Add `rows` after the last row.
void appendRows(List<PlutoRow> rows);

// Remove the currently focused row.
void removeCurrentRow();

// Remove `rows` Remove all.
void removeRows(List<PlutoRow> rows);

// Remove all rows.
void removeAllRows({bool notify = true});

How to asynchronously append a large number of rows

If the number of rows to be added at once is large, the UI may freeze due to the load on the CPU operation. In this case, the CPU operation can be processed asynchronously.

Below is a link to a demo page that works on the web. You can also check the example source code by tapping the Source button on the demo page.

Add rows asynchronously

child: PlutoGrid(
  columns: columns,
  rows: rows,
  configuration: const PlutoGridConfiguration(),
),

enableMoveDownAfterSelecting

After a value is selected in the date, time, or selection type popup, the current cell position of the grid is moved down after the popup is closed.

enableMoveHorizontalInEditing

If the value is set to true, if you press the direction key once more after reaching the end of the left and right text in the edit state, the current cell moves in the entered direction.
If the value is set to false, the current cell cannot be moved with the left and right arrow keys in the editing state.
If the cell is not in edit state, the current cell can be moved left or right regardless of this value.

enterKeyAction

Sets the behavior of the Enter key when the current cell is selected.

• PlutoEnterKeyAction.editingAndMoveDown switches the current cell to the edit state when the enter key is pressed if the current cell is not in the edit state.
  If you press the Enter key once more in the edit state, the current cell position is moved to the cell below.
• PlutoEnterKeyAction.editingAndMoveRight converts the current cell to the edit state when the enter key is pressed if the current cell is not in the edit state.
  If you press the Enter key once more in the edit state, the current cell position is moved to the right.
• PlutoEnterKeyAction.toggleEditing toggles the editing status of the current cell when the Enter key is pressed, and does not move the current cell position.
• PlutoGridEnterKeyAction.none does not perform any action when the enter key is pressed.

style

This is the style setting for PlutoGrid.

configuration: const PlutoGridConfiguration(
  style: PlutoGridStyleConfig(
    enableGridBorderShadow: true,
  ),
),

Options of style

enableGridBorderShadow enables shadowing on the grid's borders.

enableColumnBorderVertical enables vertical dividing borders between columns.

enableColumnBorderHorizontal enables horizontal borders for columns.

enableCellBorderVertical enables cell-to-cell vertical separator borders.

enableCellBorderHorizontal enables horizontal boarding of cells.

enableRowColorAnimation enables the animation effect of the background color of a row when the current row position is moved.

Colors of style

gridBackgroundColor sets the background color of the grid.

rowColor sets the background color of the row.

oddRowColor sets the background color of the odd-numbered row.

evenRowColor sets the background color of the even-numbered row.

activatedColor sets the background color of the currently focused row or cell.

checkedColor sets the background color of the selected row.

cellColorInEditState sets the background color of the cell when the cell is in edit state.

cellColorInReadOnlyState sets the background color when the cell is in the edit state and the cell is a read-only cell.(PlutoColumn.readonly)

dragTargetColumnColor sets the background color of the column to be dragged when the column is moved by dragging it.
If it is impossible to move to the position of the column that is the drag target, the background color of the column of the drag target does not change.
(In the case of a fixed column, if the overall width is narrow, the position is limited)

iconColor sets the color of the icon used by default inside the grid.

disabledIconColor sets the color of the icon's disabled state.

menuBackgroundColor sets the background color of the menu popup on the right side of the column.

gridBorderColor sets the border color of the grid.

borderColor sets the border color of columns, column groups, cells, and rows.

activatedBorderColor sets the border color when a row or cell receives focus.

inactivatedBorderColor sets the border color when a row or cell loses focus.

Sizes of style

iconSize sets the size of the icon used by default inside the grid.

rowHeight sets the height of the row.

columnHeight sets the height of the column.

columnFilterHeight sets the height of the column filter.

defaultColumnTitlePadding sets the padding of the column title area.

defaultColumnFilterPadding sets the padding of the column filter area.

defaultCellPadding sets the padding of the cell.

TextStyle of style

columnTextStyle sets the text style of the column.

cellTextStyle sets the text style of the cell.

Icons of style

columnContextIcon sets the menu icon to the right of the column title.

columnResizeIcon sets the resize icon to the right of the column title. (In case PlutoColumn.enableContextMenu is false.)

Border radius of style

gridBorderRadius sets the border radius of the grid.

gridPopupBorderRadius sets the border radius of the popup inside the grid.

scrollbar

It is the horizontal and vertical scroll bar setting of the grid.

configuration: PlutoGridConfiguration(
  scrollbar: const PlutoGridScrollbarConfig(
    isAlwaysShown: false,
    scrollbarThickness: 8,
    scrollbarThicknessWhileDragging: 10,
  ),
),

draggableScrollbar is whether the scrollbar can be scrolled by dragging it.

isAlwaysShown determines whether the scrollbar will remain visible.

scrollbarRadius sets the radius of the scrollbar.

scrollbarRadiusWhileDragging sets the radius while dragging the scrollbar.

scrollbarThickness sets the thickness of the scrollbar.

scrollbarThicknessWhileDragging sets the thickness when the scrollbar is being dragged.

columnFilter

This is the filter setting for the column.
If you press F3 while the cell is in focus, the focus is moved to the filter input box of the column of the current cell.
If you press the F3 key again in the filter input box, a filtering pop-up is called where you can set the entire filtering.
If you press ESC in the filter input box, it will return to the previous cell position.
If you enter the arrow down key in the filter input box, it moves to the first cell of the column.

configuration: const PlutoGridConfiguration(
  columnFilter: PlutoGridColumnFilterConfig(),
),

Default column filter type

The built-in column filters are set in the FilterHelper.defaultFilters static property. If no columnFilter is set, a default filter is provided.

• PlutoFilterTypeContains checks whether the filter input value is included in the values ​​of the cells of the corresponding column.
  RegExp : /filter input value/

• PlutoFilterTypeEquals checks whether the filter input value matches the values ​​of the cells of the corresponding column.
  RegExp : /^Filter input value$/

• PlutoFilterTypeStartsWith checks whether the filter input value matches the value of the cells in the corresponding column.
  RegExp : /^Filter input value/

• PlutoFilterTypeEndsWith means that the filter input value is the cell of the corresponding column.
  RegExp : /Filter input value$/

• PlutoFilterTypeGreaterThan checks whether the filter input value is greater than the value of the cells in the corresponding column.
  According to the definition of the PlutoColumn.type.compare function.

• PlutoFilterTypeGreaterThanOrEqualTo checks whether the filter input value is greater than or equal to the value of the cells in the corresponding column.
  According to the definition of the PlutoColumn.type.compare function.

• PlutoFilterTypeLessThan checks whether the filter input value is less than the value of the cells of the corresponding column.
  According to the definition of the PlutoColumn.type.compare function.

• PlutoFilterTypeLessThanOrEqualTo checks whether the filter input value is less than or equal to the value of the cells of the corresponding column.
  According to the definition of the PlutoColumn.type.compare function.

User-Defined Column Filters

The example code below applies different filters depending on the PlutoColumn.field .

columnFilter: PlutoGridColumnFilterConfig(
  filters: const [
    ...FilterHelper.defaultFilters,
    // custom filter
    ClassYouImplemented(),
  ],
  resolveDefaultColumnFilter: (column, resolver) {
    if (column.field == 'text') {
      return resolver<PlutoFilterTypeContains>() as PlutoFilterType;
    } else if (column.field == 'number') {
      return resolver<PlutoFilterTypeGreaterThan>()
          as PlutoFilterType;
    } else if (column.field == 'date') {
      return resolver<PlutoFilterTypeLessThan>() as PlutoFilterType;
    } else if (column.field == 'select') {
      return resolver<ClassYouImplemented>() as PlutoFilterType;
    }

    return resolver<PlutoFilterTypeContains>() as PlutoFilterType;
  },),

class ClassYouImplemented implements PlutoFilterType {
  @override
  String get title => 'Custom contains';

  @override
  get compare => ({
        required String? base,
        required String? search,
        required PlutoColumn? column,
      }) {
        var keys = search!.split(',').map((e) => e.toUpperCase()).toList();

        return keys.contains(base!.toUpperCase());
      };

  const ClassYouImplemented();
}

The ClassYouImplemented class that implements PlutoFilterType filters whether multiple options are included by separating the filter input value with , in case of a select type column. If the column has the select option ['one', 'two', 'three'] If you enter the filter input value as one, two, cases containing one or two will be filtered.

columnSize

You can change the column width automatically or set the column width adjustment condition.

configuration: const PlutoGridConfiguration(
  columnSize: PlutoGridColumnSizeConfig(),
),

autoSizeMode

Automatically change the width of a column in situations such as when the grid starts or the width of the grid changes.

If the total width of the grid is insufficient and all columns reach the minimum width, horizontal scrolling may occur because the total width of the column becomes larger than the entire grid.

If autoSizeMode is applied in a state other than none, if resizeMode is also applied as PlutoResizeMode.pushAndPull, the width of columns can be changed not to exceed the total width of the grid.

PlutoAutoSizeMode.none disables auto change of width.

PlutoAutoSizeMode.equal changes all columns to the same width.

PlutoAutoSizeMode.scale changes the column width proportionally according to the current width of each column.

In autoSizeMode, there is an option to set whether autoSizeMode is applied again according to the state of a column being moved, hidden or unhidden, etc.

• restoreAutoSizeAfterHideColumn determines whether autoSizeMode is reapplied after a column is hidden or unhidden.

• restoreAutoSizeAfterFrozenColumn determines whether autoSizeMode is reapplied after the column's frozen state is changed.

• restoreAutoSizeAfterMoveColumn determines whether autoSizeMode is reapplied after a column is moved.

• restoreAutoSizeAfterInsertColumn determines whether autoSizeMode is applied again after a new column is added.

• restoreAutoSizeAfterRemoveColumn determines whether autoSizeMode is reapplied after a column is deleted.

resizeMode

Set the condition to change the width of the column.

PlutoResizeMode.none disables changing the column width.

In PlutoResizeMode.normal, when the width of a column is changed, only the width of the corresponding column is changed.
In this case, the overall scroll width of the grid is also widened or narrowed.

PlutoResizeMode.pushAndPull operates to change the width of the corresponding column within the entire grid width, and to widen or narrow the width of the surrounding columns by that much.

localeText

Change the language of the characters used inside the grid. If the value is not set, it is set to English.

Built-in languages

English PlutoGridLocaleText()
Chinese PlutoGridLocaleText.china()
Korean PlutoGridLocaleText.korean()
Russian PlutoGridLocaleText.russian()
Czech PlutoGridLocaleText.czech()
brazilianPortuguese PlutoGridLocaleText.brazilianPortuguese()
Spanish PlutoGridLocaleText.spanish()
Persian PlutoGridLocaleText.persian()
Arabic PlutoGridLocaleText.arabic()

Change the default language set

configuration: const PlutoGridConfiguration(
  localeText: PlutoGridLocaleText(
    unfreezeColumn: 'Unpin column',
    freezeColumnToStart: 'Pin column to left',
  ),
),

If there is a submenu, an arrow icon is displayed to the right of the menu item. Tapping on a menu item with this submenu brings up the following submenus. To return to the previous menu, simply tap the ‘Go Back’ menu item.

Type of menu item

• PlutoMenuItem is a basic button type menu item.
• PlutoMenuItem.checkbox is the menu item that the checkbox widget appears.
• PlutoMenuItem.radio is the menu item where the radio button widget appears.

Set submenu

PlutoMenuItem can pass children attribute. children is a List<PlutoMenuItem>? type, and the same PlutoMenuItem can be set as a submenu. If the children value is not passed, it acts as a menu item with no submenu.

Full sample code

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('PlutoMenuBar'),
        ),
        body: const PlutoMenuBarDemo(),
      ),
    );
  }
}

class PlutoMenuBarDemo extends StatelessWidget {
  const PlutoMenuBarDemo({
    super.key,
  });

  void message(context, String text) {
    ScaffoldMessenger.of(context).hideCurrentSnackBar();

    final snackBar = SnackBar(
      content: Text(text),
    );

    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

  List<PlutoMenuItem> getMenus(BuildContext context) {
    return [
      PlutoMenuItem(
        title: 'Menu 1',
        icon: Icons.home,
        children: [
          PlutoMenuItem(
            title: 'Menu 1-1',
            icon: Icons.group,
            onTap: () => message(context, 'Menu 1-1 tap'),
            children: [
              PlutoMenuItem(
                title: 'Menu 1-1-1',
                onTap: () => message(context, 'Menu 1-1-1 tap'),
                children: [
                  PlutoMenuItem(
                    title: 'Menu 1-1-1-1',
                    onTap: () => message(context, 'Menu 1-1-1-1 tap'),
                  ),
                  PlutoMenuItem(
                    title: 'Menu 1-1-1-2',
                    onTap: () => message(context, 'Menu 1-1-1-2 tap'),
                  ),
                ],
              ),
              PlutoMenuItem(
                title: 'Menu 1-1-2',
                onTap: () => message(context, 'Menu 1-1-2 tap'),
              ),
            ],
          ),
          PlutoMenuItem(
            title: 'Menu 1-2',
            onTap: () => message(context, 'Menu 1-2 tap'),
          ),
          PlutoMenuItem.checkbox(
            title: 'Menu 1-3',
            initialCheckValue: true,
            onTap: () => message(context, 'Menu 1-3 tap'),
            onChanged: (flag) => print(flag),
          ),
          PlutoMenuItem.radio(
            title: 'Menu 1-3',
            initialRadioValue: _RadioItems.one,
            radioItems: _RadioItems.values,
            onTap: () => message(context, 'Menu 1-3 tap'),
            onChanged: (item) => print(item),
            getTitle: (item) {
              switch (item as _RadioItems) {
                case _RadioItems.one:
                  return 'One';
                case _RadioItems.two:
                  return 'Two';
                case _RadioItems.three:
                  return 'Three';
              }
            },
          ),
        ],
      ),
      PlutoMenuItem(
        title: 'Menu 2',
        icon: Icons.add_circle,
        children: [
          PlutoMenuItem(
            title: 'Menu 2-1',
            onTap: () => message(context, 'Menu 2-1 tap'),
          ),
        ],
      ),
      PlutoMenuItem(
        title: 'Menu 3',
        icon: Icons.apps_outlined,
        onTap: () => message(context, 'Menu 3 tap'),
      ),
      PlutoMenuItem(
        title: 'Menu 4',
        onTap: () => message(context, 'Menu 4 tap'),
      ),
      PlutoMenuItem(
        title: 'Menu 5',
        onTap: () => message(context, 'Menu 5 tap'),
      ),
      PlutoMenuItem(
        title: 'Menu 6',
        children: [
          PlutoMenuItem(
            title: 'Menu 6-1',
            onTap: () => message(context, 'Menu 6-1 tap'),
            children: [
              PlutoMenuItem(
                title: 'Menu 6-1-1',
                onTap: () => message(context, 'Menu 6-1-1 tap'),
                children: [
                  PlutoMenuItem(
                    title: 'Menu 6-1-1-1',
                    onTap: () => message(context, 'Menu 6-1-1-1 tap'),
                  ),
                  PlutoMenuItem(
                    title: 'Menu 6-1-1-2',
                    onTap: () => message(context, 'Menu 6-1-1-2 tap'),
                  ),
                ],
              ),
              PlutoMenuItem(
                title: 'Menu 6-1-2',
                onTap: () => message(context, 'Menu 6-1-2 tap'),
              ),
            ],
          ),
          PlutoMenuItem(
            title: 'Menu 6-2',
            onTap: () => message(context, 'Menu 6-2 tap'),
          ),
        ],
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const SizedBox(height: 30),
        PlutoMenuBar(
          menus: getMenus(context),
        ),
        const SizedBox(height: 30),
        PlutoMenuBar(
          backgroundColor: Colors.deepOrange,
          itemStyle: PlutoMenuItemStyle(
            activatedColor: Colors.white,
            indicatorColor: Colors.deepOrange,
            textStyle: const TextStyle(color: Colors.white),
            moreIconColor: Colors.white,
          ),
          menus: getMenus(context),
        ),
        const SizedBox(height: 30),
        PlutoMenuBar(
          backgroundColor: Colors.orange,
          height: 55,
          itemStyle: PlutoMenuItemStyle(
            activatedColor: Colors.white,
            indicatorColor: Colors.orange,
            textStyle: const TextStyle(color: Colors.white, fontSize: 18),
            moreIconColor: Colors.white,
          ),
          menus: getMenus(context),
        ),
        const SizedBox(height: 30),
        PlutoMenuBar(
          backgroundColor: Colors.black,
          itemStyle: PlutoMenuItemStyle(
            iconColor: Colors.white,
            iconSize: 26,
            moreIconColor: Colors.white,
            activatedColor: Colors.white,
            unselectedColor: Colors.white70,
            indicatorColor: Colors.black,
            textStyle: const TextStyle(color: Colors.white, fontSize: 20),
          ),
          height: 65,
          menus: getMenus(context),
        ),
      ],
    );
  }
}

enum _RadioItems {
  one,
  two,
  three,
}

Rows should be passed as a List<PlutoRow> type to the rows property when creating a PlutoGrid. It can also be passed as an empty list.

final List<PlutoRow> rows = [
  PlutoRow(
    cells: {
      'id': PlutoCell(value: 'user1'),
      'name': PlutoCell(value: 'Mike'),
      'age': PlutoCell(value: 20),
      'role': PlutoCell(value: 'Programmer'),
      'joined': PlutoCell(value: '2021-01-01'),
      'working_time': PlutoCell(value: '09:00'),
    },
  ),
];

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      padding: const EdgeInsets.all(15),
      child: PlutoGrid(
        columns: columns,
        rows: rows,
      ),
    ),
  );
}

cells should be set to Map<String, PlutoCell> type with the PlutoColumn.field value set when creating columns as a key.

PlutoRow(checked: true);

The checked property is whether the checkbox is checked when PlutoColumn.enableRowChecked is set to true. This value can be set at startup, and the value can be changed during runtime during grid operation.

PlutoRow(sortIdx: 0);

The sortIdx value indicates the first sort state of the row. When creating a grid, this value is automatically set according to the list order. If this value is set, this value is not automatically set when the grid is created. This value is used to return to the original sort state when the sort state of rows is changed.

Default properties of cells

Cells should be set to match the value of PlutoColumn.field when creating PlutoRow.
PlutoCell.value must be set to a value that matches PlutoColumn.type. (text, number, date, etc.)
If PlutoColumn.type is a type with a format such as number or date, the value of PlutoCell.value can be changed according to the format. (if PlutoColumn.applyFormatterInEditing value is set to true)

PlutoRow(
  cells: {
    'id': PlutoCell(value: 'user1'),
    'name': PlutoCell(value: 'Mike'),
    'age': PlutoCell(value: 20),
    'role': PlutoCell(value: 'Programmer'),
    'joined': PlutoCell(value: '2021-01-01'),
    'working_time': PlutoCell(value: '09:00'),
  },
),

Columns must be passed to the columns property, which is a List<PlutoColumn> type when creating a PlutoGrid.

final List<PlutoColumn> columns = [
  PlutoColumn(
    title: 'Id',
    field: 'id',
    type: PlutoColumnType.text(),
  ),
  PlutoColumn(
    title: 'Name',
    field: 'name',
    type: PlutoColumnType.number(),
  ),
  PlutoColumn(
    title: 'Age',
    field: 'age',
    type: PlutoColumnType.date(),
  ),
];

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      padding: const EdgeInsets.all(15),
      child: PlutoGrid(
        columns: columns,
        rows: rows,
      ),
    ),
  );
}

title is the title of the column displayed on the screen.
field is the only value that identifies the column inside PlutoGrid.
type determines the type of the column.

Type of column

You can pass defaultValue to the constructor for each column type.
defaultValue is used as the default value when a new row is added.

PlutoColumn(
  title: 'Id',
  field: 'id',
  type: PlutoColumnType.text(defaultValue: 'default value'),
),

Text column

This is a column where text can be entered or edited.

PlutoColumn(
  title: 'Id',
  field: 'id',
  type: PlutoColumnType.text(),
),

Number column

This is a column where numbers can be entered or edited.

PlutoColumn(
  title: 'Age',
  field: 'age',
  type: PlutoColumnType.number(
    negative: false,
    format: '#,###',
    applyFormatOnInit: true,
    allowFirstDot: false,
  ),
),

negative determines whether negative numbers are allowed. Default is true.

format determines the format in which numbers are displayed. The default is #,###. (Follows NumberFormat from Intl package.)

applyFormatOnInit determines whether values are initialized according to format when a row is first added. If the first set value is 1.123 and format does not accept decimal points, the value is initialized to 1. Default is true .

allowFirstDot allows a dot at the beginning if it allows negative numbers. This option is required on devices where the .- symbol works as a single button (some mobile terminals). The default is false .

Select column

This is a column where you can select one of several set items.

PlutoColumn(
  title: 'Role',
  field: 'role',
  type: PlutoColumnType.select(
    <String>[
      'Programmer',
      'Designer',
      'Owner',
    ],
    enableColumnFilter: false,
  ),
),

The user can select one item from the range of items in the List passed when creating select. A built-in popup opens in the grid, allowing you to select it with your keyboard or mouse.

enableColumnFilter is whether to enable filtering on the built-in popup. The default is false . If enabled, you can use the filtering function in the pop-up.

Date column

This is a column where you can enter or edit the date.

PlutoColumn(
  title: 'Joined',
  field: 'joined',
  type: PlutoColumnType.date(
    startDate: DateTime(2022, 01, 01),
    endDate: DateTime(2022, 01, 31),
    format: 'yyyy-MM-dd',
    headerFormat: 'yyyy-MM',
    applyFormatOnInit: true,
  ),
),

startDate can limit the optional starting range of dates. If not set, there is no limit to the starting range when selecting a date.

endDate can constrain the selection end range of dates. If not set, there is no limit to the ending range in the date selection.

format determines the format of the date. (Follows DateFormat in Intl package.)

headerFormat determines the format when displaying the current year and month at the top in the date picker popup.

applyFormatOnInit is whether to change the value to match format when a row is first added. If format is 'yyyy-MM-ddd` and the value is '2022-01-02 00:00:00', the value is changed to '2022-01-02'.

Time column

This is a column where time can be entered or edited. A popup is called to select the hour and minute in the form of 00:00.

PlutoColumn(
  title: 'Working time',
  field: 'working_time',
  type: PlutoColumnType.time(),
),

Additional column properties

Additional properties such as limiting the edit status of a column or adding an icon to the column title.

/// Set the column to non-modifiable read mode.
PlutoColumn(readOnly: true);

/// Set the column width and minimum width.
PlutoColumn(width: 200.0, minWidth: 80.0);

/// Set the padding of the column title and filter area.
PlutoColumn(
   titlePadding: const EdgeInsets.all(10),
   filterPadding: const EdgeInsets.all(10),
);

/// You can customize the column title.
PlutoColumn(
 titleSpan: const TextSpan(
   children: [
     WidgetSpan(
       child: Text(
         '* ',
         style: TextStyle(color: Colors.red),
       ),
     ),
     TextSpan(text: 'column title'),
   ],
 ),
);

/// Set the padding of the cells of the corresponding column.
PlutoColumn(
   cellPadding: const EdgeInsets.all(10),
);

/// Set the column title and text alignment of the cells of the column.
PlutoColumn(
   textAlign: PlutoColumnTextAlign.start,
   titleTextAlign: PlutoColumnTextAlign.end,
);

/// Freeze the column at the beginning or end.
/// If the total width of the non-frozen column is 200 or less, 
/// it is processed to be unfreeze even if the frozen column is set.
PlutoColumn(
   frozen: PlutoColumnFrozen.start,
);

/// Sort the cells in the column.
PlutoColumn(
   sort: PlutoColumnSort.ascending,
);

/// Customize the format of the cells in the column.
/// The example changes the output 
/// to say (1) Allowed in the cell if the actual value is the number '1'.
PlutoColumn(
  title: 'Permission readonly',
  field: 'permission_readonly',
  readOnly: true,
  type: PlutoColumnType.number(),
  /// Apply the formatter in the editing state.
  /// However, it is applied only when the cell is readonly
  /// or the text cannot be directly modified, 
  /// such as in the form of select popup.
  applyFormatterInEditing: true,
  formatter: (dynamic value) {
    if (value.toString() == '1') {
      return '(1) Allowed';
    } else {
      return '(0) Disallowed';
    }
  },
),

/// Set the background color of the column.
PlutoColumn(
  backgroundColor: Colors.white,
);

/// You can customize the cells of the column.
/// The following is an example of dynamically changing 
/// the text color according to the selected item value 
/// in the select type column.
PlutoColumn(
  title: 'column2',
  field: 'column2',
  type: PlutoColumnType.select(<String>['red', 'blue', 'green']),
  renderer: (rendererContext) {
    Color textColor = Colors.black;

    if (rendererContext.cell.value == 'red') {
      textColor = Colors.red;
    } else if (rendererContext.cell.value == 'blue') {
      textColor = Colors.blue;
    } else if (rendererContext.cell.value == 'green') {
      textColor = Colors.green;
    }

    return Text(
      rendererContext.cell.value.toString(),
      style: TextStyle(
        color: textColor,
        fontWeight: FontWeight.bold,
      ),
    );
  },
),

/// Decide whether the position can be moved by dragging the column.
/// If set to `true`, you can move the column 
/// to the position of another column by dragging it.
PlutoColumn(
  enableColumnDrag: true,
);

/// Displays an icon that can drag a row to the cells of the column.
/// You can move the row position by dragging this icon.
PlutoColumn(
  enableRowDrag: true,
);

/// Whether to display a check box in the column and its cells.
PlutoColumn(
  enableRowChecked: true,
);

/// Whether the column can be sorted.
/// If set to `true`, you can sort by tapping the column heading.
PlutoColumn(
  enableSorting: true,
);

/// If `enableContextMenu` is `true`, 
/// an icon that can invoke the context menu is displayed 
/// at the end of the column title.
/// If `enableDropToResize` is `true`, 
/// you can change the column width by dragging the menu icon.
/// If `enableContextMenu` is `true`, 
/// set `enableFilterMenuItem` to `false` to hide filter related menus.
/// When `enableContextMenu` is `true`, if `enableHideColumnMenuItem` 
/// is set to `false`, the menu for hiding columns is not displayed.
/// If `enableContextMenu` is `true`, set `enableSetColumnsMenuItem` to `false` 
/// to hide the column setting menu.
PlutoColumn(
  enableContextMenu: true,
  enableDropToResize: true,
  enableFilterMenuItem: true,
  enableHideColumnMenuItem: true,
  enableSetColumnsMenuItem: true,
);

/// If `enableAutoEditing` is `true`, the cell is automatically changed 
/// to edit state when it receives focus.
/// If `enableEditingMode` is `true`, tap a cell or press Enter 
/// to change to editing state.
PlutoColumn(
  enableAutoEditing: true,
  enableEditingMode: true,
);

/// You can hide the column.
PlutoColumn(
  hide: true,
);

Search for pluto_grid in pub.dev and add the package to your project.
pub.dev to install pluto_grid

And add PlutoGrid to your screen by referring to the example code below.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PlutoGrid Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PlutoGridExamplePage(),
    );
  }
}

/// PlutoGrid Example
//
/// For more examples, go to the demo web link on the github below.
class PlutoGridExamplePage extends StatefulWidget {
  const PlutoGridExamplePage({Key? key}) : super(key: key);

  @override
  State<PlutoGridExamplePage> createState() => _PlutoGridExamplePageState();
}

class _PlutoGridExamplePageState extends State<PlutoGridExamplePage> {
  final List<PlutoColumn> columns = <PlutoColumn>[
    PlutoColumn(
      title: 'Id',
      field: 'id',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Name',
      field: 'name',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Age',
      field: 'age',
      type: PlutoColumnType.number(),
    ),
    PlutoColumn(
      title: 'Role',
      field: 'role',
      type: PlutoColumnType.select(<String>[
        'Programmer',
        'Designer',
        'Owner',
      ]),
    ),
    PlutoColumn(
      title: 'Joined',
      field: 'joined',
      type: PlutoColumnType.date(),
    ),
    PlutoColumn(
      title: 'Working time',
      field: 'working_time',
      type: PlutoColumnType.time(),
    ),
  ];

  final List<PlutoRow> rows = [
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user1'),
        'name': PlutoCell(value: 'Mike'),
        'age': PlutoCell(value: 20),
        'role': PlutoCell(value: 'Programmer'),
        'joined': PlutoCell(value: '2021-01-01'),
        'working_time': PlutoCell(value: '09:00'),
      },
    ),
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user2'),
        'name': PlutoCell(value: 'Jack'),
        'age': PlutoCell(value: 25),
        'role': PlutoCell(value: 'Designer'),
        'joined': PlutoCell(value: '2021-02-01'),
        'working_time': PlutoCell(value: '10:00'),
      },
    ),
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user3'),
        'name': PlutoCell(value: 'Suzi'),
        'age': PlutoCell(value: 40),
        'role': PlutoCell(value: 'Owner'),
        'joined': PlutoCell(value: '2021-03-01'),
        'working_time': PlutoCell(value: '11:00'),
      },
    ),
  ];

  /// columnGroups that can group columns can be omitted.
  final List<PlutoColumnGroup> columnGroups = [
    PlutoColumnGroup(title: 'Id', fields: ['id'], expandedColumn: true),
    PlutoColumnGroup(title: 'User information', fields: ['name', 'age']),
    PlutoColumnGroup(title: 'Status', children: [
      PlutoColumnGroup(title: 'A', fields: ['role'], expandedColumn: true),
      PlutoColumnGroup(title: 'Etc.', fields: ['joined', 'working_time']),
    ]),
  ];

  /// [PlutoGridStateManager] has many methods and properties to dynamically manipulate the grid.
  /// You can manipulate the grid dynamically at runtime by passing this through the [onLoaded] callback.
  late final PlutoGridStateManager stateManager;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(15),
        child: PlutoGrid(
          columns: columns,
          rows: rows,
          columnGroups: columnGroups,
          onLoaded: (PlutoGridOnLoadedEvent event) {
            stateManager = event.stateManager;
          },
          onChanged: (PlutoGridOnChangedEvent event) {
            print(event);
          },
          configuration: const PlutoGridConfiguration(),
        ),
      ),
    );
  }
}

Columns and rows can start with an empty list.
Column groups can be excluded if not needed.
PlutoColumn.field cannot be duplicated.
The keys in PlutoRow.cells must be defined to match PlutoColumn.field.

Features

• Freeze the column left and right
• Drag the column to move it
• Column grouping
• Column filtering and sorting
• Automatically adjust column width
• Move by dragging a row
• Row pagination
• Customizable columns and cells
• Interlock keyboard movement between two grids
• Call the grid in popup form
• Select mode for select type data
• Keyboard shortcut support
• Support for layout and keyboard actions for RTL languages

Links

• Live demo
• Pub.dev
• Github

A link to a live demo where you can see PlutoMenuBar in action on the web.

A link to a live demo where you can see PlutoGrid in action on the web.