column definition for english

Column type and definition

This is a description of column types and definitions.
Refer to the intl package for the format to be set in date or number.

var columns = [
    PlutoColumn(
      title: 'Text column',
      field: 'text_column',
      type: PlutoColumnType.text(
          readOnly: false,
          defaultValue: '',
          // ... column type properties
      ),
      // ... column properties
    ),
    // ... more columns
];

Column type

When creating a column, set the type of the column with the value passed to the type property.

All types have readOnly and defaultValue properties.

readOnly cannot be modified by the user. However, it can be forcibly modified by using the changeCellValue method of PlutoGridStateManager.

The defaultValue becomes the default value when adding a new row using the getNewRow, prependNewRows, and appendNewRows methods of PlutoGridStateManager.

PlutoColumnType.text()

This is the column type in which text can be entered.
There are no additional properties other than the default properties.

PlutoColumnType.number()

This is the type of column in which numbers can be entered.

Additional attributes	Description
negative	Allow negative numbers.
format	Set the format when displaying numbers. The default value is '#,###' and output in the form of 123,000,000. If you set the value as '#,###.###', it becomes a numeric column in the form of 123,000,000.123 that allows up to 3 decimal places.
applyFormatOnInit	Apply format when a row is first set or added.

PlutoColumnType.select()

This is a pop-up column type that selects a specific item from the list.
The user cannot enter the value directly, it must be selected from the pop-up.
You must pass an array as the first parameter.
You can pass a character form or an enum.

var columns = [
    PlutoColumn(
      title: 'Select column',
      field: 'select_column',
      type: PlutoColumnType.select([
          'Apple', 'Banana', 'Orange',
      ]),
      // ... column properties
    ),
    // ... more columns
];

PlutoColumnType.date()

This is a pop-up column type where you can select the date.

Additional attributes	Description
startDate	Set the start range that can be selected as DateTime type.
endDate	Set the end range that can be selected as DateTime type.
format	'yyyy-MM-dd' is the default. It can be set in the form of `'MM/dd/yyyy'
applyFormatOnInit	Apply format when a row is first set or added.

PlutoColumnType.time()

It is a column type that can select the time in the form of 00:00.
You can select from 00:00 to 23:59.

Column definition

You can set properties when defining a column.

var columns = [
    PlutoColumn(
      title: 'Text column',
      field: 'text_column',
      type: PlutoColumnType.text(),
      // ... column properties
      width: 250,
      minWidth: 80,
      textAlign: PlutoColumnTextAlign.right,
      // ...
    ),
    // ... more columns
];

List of column properties

Property name	Description
title	Set the text displayed in the column.
field	Set the field name of the column. Each column must set a unique value. Used as key when defining row.
type	This is the type of column described above.
width	Set the width of the column.
minWidth	This is the minimum width available when the user changes the width of the column.
textAlign	You can align the title of the column. PlutoColumnTextAlign.left, PlutoColumnTextAlign.right
frozen	Freezes the column to the left or right. The user can also change the status in the column menu. PlutoColumnFrozen.left, PlutoColumnFrozen.right, PlutoColumnFrozen.none
sort	You can sort the columns. And also change the sorting status when the user taps the column heading. PlutoColumnSort.ascending, PlutoColumnSort.descending, PlutoColumnSort.none
formatter	When the cell value is displayed, you can change it to the desired value and print it out.
applyFormatterInEditing	When the formatter is set, the changed value is output even in edit mode. However, it is valid only when readOnly is true or when the value cannot be directly modified, such as a column type such as date and select.
renderer	When outputting cells, you can insert any icon, button, or image you want.
enableColumnDrag	You can change the position of the column by dragging the column title left or right.
enableRowDrag	An icon for dragging the row appears at the beginning of the cell. You can drag it up or down to change the row position. However, when the filter is set or sorted, the icon disappears and cannot be dragged. You can also select multiple rows and drag them all at once in the Selecting.row mode.
enableRowChecked	A check box appears to the left of the cell. A check box appears in the column to check all of them. You can access the selected or unselected rows with the checkedRows and unCheckedRows properties of the PlutoGridStateManager.
enableSorting	Allows users to sort by tapping on a column heading.
enableContextMenu	Activate the menu on the right side of the column. When you tap the menu icon, a menu appears.
enableFilterMenuItem	Activate the filtering related menu while the column menu is activated.
enableEditingMode	You can change to the edit state when you tap a cell or press Enter.

formatter example

You can change the output value by defining a callback function in the formatter.
If applyFormatterInEditing is set to true, it is applied even when entering the editing state.

var column = PlutoColumn(
  title: 'Group',
  field: 'group',
  type: PlutoColumnType.select(['A', 'B', 'C', 'N']),
  applyFormatterInEditing: true,
  formatter: (dynamic value) {
    switch (value) {
      case 'A':
        return '(A) Admin';
      case 'B':
        return '(B) Manager';
      case 'C':
        return '(C) User';
    }

    return '(N) None';
  },
);

renderer example

By defining a callback function that returns a widget, you can add an icon, button or image to the cell.

var column = PlutoColumn(
  title: 'column2',
  field: 'column2',
  type: PlutoColumnType.select(['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,
      style: TextStyle(
        color: textColor,
        fontWeight: FontWeight.bold,
      ),
    );
  },
);