bosskmk / pluto_grid Goto Github PK

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

Home Page: https://pluto.weblaze.dev

License: MIT License

Kotlin 0.01% Swift 0.09% Objective-C 0.01% Dart 96.45% HTML 0.27% CMake 1.23% C++ 1.79% C 0.10% Ruby 0.06%

flutter datagrid datatable grid sticky-headers frozen-columns pagination sorting table filtering

pluto_grid's Introduction

PlutoGrid for flutter - v8.0.0

PlutoGrid is a DataGrid that can be operated with the keyboard in various situations such as moving cells.
It is developed with priority on the web and desktop.
Improvements such as UI on mobile are being considered.
If you comment on an issue, mobile improvements can be made quickly.

Demo Web

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

Pub.Dev

Check out how to install from the official distribution site.

Documentation

The documentation has more details.

ChangeLog

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

Issue

Report any questions or errors.

Packages

PlutoGridExport
This package can export the metadata of PlutoGrid as CSV or PDF.

Screenshots

Change the color of the rows or make the cells look the way you want them.

Date type input can be easily selected by pop-up and keyboard.

The selection type column can be easily selected using a pop-up and keyboard.

Group columns by desired depth.

Grid can be expressed in dark mode or a combination of desired colors. Also, freeze the column, move it by dragging, or adjust the size.

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

Flutter version compatible

Flutter	PlutoGrid
3.19.0 or higher	8.0.0 or higher
3.10.0 or higher	7.0.0 or higher
3.7.0 or higher	6.0.0 or higher
3.3.0 or higher	5.0.6 or higher
3.0.0 or higher	3.0.0-0.pre or higher
2.5.0 or higher	2.5.0 or higher

For other versions, contact the issue

Related packages

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

Donate to this project

Jetbrains provides a free license

pluto_grid's People

Contributors

Stargazers

Watchers

Forkers

pluto_grid's Issues

Textalignment

i have a cell with type :PlutoColumnType.number(),
i want all text in cell align to right.

how to set this?

Add PlutoGridOptions.

Enable/disable lines between columns.
Dark mode.
Cells appear to be cut off at the edges.

Current focused row is not displayed, when list bigger than screen

The current focus record is not visible, it moving beyond the viewport

Make the header design more modern

Hi @bosskmk

Is possibile make the header design more modern ?

or make a easy custom code for to change it ?

onSelected event in PlutoRow, PlutoCell and PlutoColumn

It's possible to add onSelected event in PlutoRow, PlutoCell and PlutoColumn?

Thanks a lot for your work:-)

cell color and line height

First of all thanks for the widget, it is really very good.
Seeing the documentation, I realized that the customization of the lines and cells will be done in the future. Do you have any plans to include height of lines and colors by cells?

Calculate Cell

Introduce a calculating cell , i.e. if a user puts simple formula in the text field like =(5*25) * .10 and press Enter then it must calculate and show the value 1.25

Hold down the control key and change to another window, release the control key and return to the grid, the control key is pressed.

bottom sheet or dialog on top of grid

I put a floating action button to showModalBottomSheet, and the grid seems to maintain focus/input unless you use a showBottomSheet not modal. Is there a prefered way to show a dialog/bottom sheet above a grid?

Fixed column problem when adjusting column width.

In the state that the fixed column is loose due to the narrow width,
If the column width is reduced to secure the minimum width, a fixed column should appear.

a scroll status should be updated, after filtering or adding or deleting rows.

how i can disable next row when i change data from row

after change value from first row, position will go to next when i press enter or after i choose value from selected box, so i can not update value to another column at first row, it will change value to next row. May i disable next rows on change or any solution for my error.

Add special selector for current row

@bosskmk

May to add special selector for current row ? and plus button

and a Drag and Drop between records? (not the columns)

See QuickBooks ( best online software )

https://quickbooks.intuit.com/global/

Mauro Botta

p.s.
I sent you a lot of coffees, now, I hope you don't get a headache

masking number on typing

Hi, i have a column with type PlutoColumnType.number(), can i format the number as like money format on typing the text?

thank you

How to add an loading indicator into pluto dual grid

when i change selected from gridPropsA i want add an loading into gridPropsB i try put it in onLoaded but it not work

Applying scrolling up or down the grid when dragging a row.

[feature/select-mode] Continue commit 1ee7d583

cleanup code.
Whether or not to support PlutoSelectingMode.Horizontal when copying and pasting multiple selects.

How i can disable change value to id when i click change from value formatter

when i click in value formatter it will showing id of it but i don't want this, it very uncomfortable and make user fell not well

how i can use select with id and text

i try make an example with status of product, on database i save as 0 and 1, on app i show it like block and use. But i don't known how to do this when i want update value to my database because it not 0 or 1, it block or use

The sample application indicates errors

Good widget !!!!

PLUTO version 1.15, the code indicates 6 errors

my flutter environment
[√] Flutter (Channel master, 1.22.0-10.0.pre.449, on Microsoft Windows [version 10.0.19041.508], locale fr-FR)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Professional 2019 16.7.5)
[√] Android Studio (version 4.0)
[√] Connected device (3 available)

Add / Remove Rows

Grid must take focus after clicking on Add/Remove Rows, as of now the Button "Add/Remove" gains the focus and focus remains on the button only. The focus must go back to the grid

the newly added fixed column does not scroll correctly.

In the absence of a fixed column, Place the scroll halfway.

When a fixed column is added, the newly added fixed column does not scroll correctly.

Fixed cell movement error after fixing column without fixed column.

step.

No fixed column
Select the cell of the second column
Fix the second column
Arrow key move right

Expected result
Move one space to the right

Actual result
Move to the 3rd column.

Add enableEditingMode to PlutoColumn.

Added property to determine whether to enter Editing mode when tapping a cell or pressing Enter key.

Deleting all rows

Hello.
First of all , I would like to thank you for this package.
Is there a direct method for deleting all rows without selecting them?

Cell selection problem.

If the grid has a minimum height set, then in a state narrower than the minimum height,

There is a position error when selecting cells by long tapping with the mouse after moving the whole scroll to the bottom.

fixed column bug.

If the grid starts without a fixed column and one column is fixed to the right, the column is fixed to the right, but the original column does not disappear and overlaps.

In edit mode, ignore event of pressed shift + arrow left or right.

The error was corrected, but there was the following issue, so the operation was tested only on the web. In Desktop, test after flutter upgrade.

flutter/flutter#58473

Improve date sorting speed in 100,000 lists.

In the case of a date in a format such as 2020-12-31, it is faster if compared directly in the string state.

However, when sorting a string type such as 12/31/2020 or 31/12/2020, the year is behind and needs to be parsed, but the parsing speed is slow.

  int compare(dynamic a, dynamic b) {
    final dateFormat = intl.DateFormat(format);

    final _a = dateFormat.parse(a);

    final _b = dateFormat.parse(b);

    return _a.compareTo(_b);
  }

Keyboard input problem in Edge browser.

Conditional Select items

Display a list of items according to conditions in the select popup.

When the date is MM/dd/yyyy, the initial value of the pop-up is incorrect.

Focus logic change

Modified so that the Grid does not force focus and works properly according to the situation in which focus is received or taken away

Adding data from outside the grid

FocusScope works to give focus to a modal bottomsheet, but when data is changed, even though the Pluto grid is in a streambuilder, and the rows get rebuilt on each change of data, the grids state is being rebuilt, but not with new data.

have problem is wrong position to select cell (help me pls)

i use pluto_grid with lib zoom_widget but I do zoom out and select is select cell wrong .I thing position have problem but i zoom in side my screen i select cell Correct.
and i have 1 question to ask i want to do cell can't select can or can't because i do all cell one column in left side i want to do same title column and i want to do can't click

in picture i select 2cell but error to select wrong

picture dishere i want to close to click to select left side to title

how to get position cell

i dont know how to get position cell and row to click and click drag to select cell

Set line height.

Related #73.

gr8 Work | Thanks for the Widget

First of all thank you very much for the widget and it has very promising future in Flutter.

For state manager, can you look into GetX https://github.com/jonataslaw/getx , i believe this library will reduce much of the boiler point code.

Also, will it be possible for you to explain the widget development, what logic does what. Have seen the code, still being new to Flutter, few things goes over head.