# Configuration When creating a `PlutoGrid`, you can change the grid settings by passing `PlutoGridConfiguration` to the `configuration` property. ```dart 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. ![Animation.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657600595850/ngVVlA2jw.gif align="left") #### 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`. ```dart 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. ```dart 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. ![column_filter.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657604399935/wUlbkOsCg.png align="left") ```dart 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` . ```dart columnFilter: PlutoGridColumnFilterConfig( filters: const [ ...FilterHelper.defaultFilters, // custom filter ClassYouImplemented(), ], resolveDefaultColumnFilter: (column, resolver) { if (column.field == 'text') { return resolver() as PlutoFilterType; } else if (column.field == 'number') { return resolver() as PlutoFilterType; } else if (column.field == 'date') { return resolver() as PlutoFilterType; } else if (column.field == 'select') { return resolver() as PlutoFilterType; } return resolver() 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. ```dart 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. ![resize_normal.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657606685038/huMFP76DB.gif align="left") `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. ![resize_push_and_pull.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657606693604/wV79u_Sp9.gif align="left") #### 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 ```dart configuration: const PlutoGridConfiguration( localeText: PlutoGridLocaleText( unfreezeColumn: 'Unpin column', freezeColumnToStart: 'Pin column to left', ), ), ```