Skip to content
This repository was archived by the owner on Mar 11, 2025. It is now read-only.
This repository was archived by the owner on Mar 11, 2025. It is now read-only.

[Feature] Make columnAscendingIcon and columnDescendingIcon clickable #96

@itsnotmeman

Description

@itsnotmeman

The columnAscendingIcon and columnDescendingIcon appear when clicking on a column header to sort the column.
These icons are not clickable to change the sort direction. So for columns with very small widths, it becomes very hard to find space around these icons to still be able to click on the header.

Would be great if this could be fixed so that it is possible to also click on the icons or remove the icons.

Here a sample code to reproduce the problem when clicking on the ID column header more than once.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PlutoGrid Example',
      home: Scaffold(
        appBar: AppBar(title: const Text('PlutoGrid Example')),
        body: const SimplePlutoGrid(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Define the columns for the grid
    final List<PlutoColumn> columns = [
      PlutoColumn(
        title: 'ID',
        field: 'id',
        minWidth: 40,
        width: 40,
        enableContextMenu: false,
        enableDropToResize: false,
        type: PlutoColumnType.number(),
      ),
      PlutoColumn(
        title: 'Name',
        field: 'name',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'Age',
        field: 'age',
        type: PlutoColumnType.number(),
      ),
    ];

    // Define the rows for the grid
    final List<PlutoRow> rows = [
      PlutoRow(cells: {
        'id': PlutoCell(value: 1),
        'name': PlutoCell(value: 'Alice'),
        'age': PlutoCell(value: 25),
      }),
      PlutoRow(cells: {
        'id': PlutoCell(value: 2),
        'name': PlutoCell(value: 'Bob'),
        'age': PlutoCell(value: 30),
      }),
      PlutoRow(cells: {
        'id': PlutoCell(value: 3),
        'name': PlutoCell(value: 'Charlie'),
        'age': PlutoCell(value: 35),
      }),
    ];

    return PlutoGrid(
      columns: columns,
      rows: rows,
      onChanged: (event) {
        print('changed');
      },
      configuration: PlutoGridConfiguration(
        enableMoveHorizontalInEditing: true, // Allow horizontal navigation
        shortcut: PlutoGridShortcut(
          actions: {
            ...PlutoGridShortcut.defaultActions,
            LogicalKeySet(LogicalKeyboardKey.shift): CustomShiftKeyAction(),
          }
        )
      ),
    );
  }
}

// Override shift key action to enable to start
// typing in uppercase in a PlutoGrid cell.
class CustomShiftKeyAction extends PlutoGridShortcutAction {
  @override
  void execute({
    required PlutoKeyManagerEvent keyEvent,
    required PlutoGridStateManager stateManager,
  }) {
    stateManager.setEditing(true);
    print('Shift pressed');
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions