1# GridObjectSortComponent
2
3
4**GridObjectSortComponent** is a grid object organizer that you can use to edit, drag to sort, add, and delete grid objects.
5
6
7>  **NOTE**
8>
9>  This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Modules to Import
13
14```ts
15import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'
16```
17
18##  Child Components
19
20Not supported
21
22## Attributes
23
24The [universal attributes](ts-universal-attributes-size.md) are supported.
25
26## GridObjectSortComponent
27
28GridObjectSortComponent({options: GridObjectSortComponentOptions, dataList: Array\<GridObjectSortComponentItem>, onSave: (select: Array\<GridObjectSortComponentItem>, unselect: Array\<GridObjectSortComponentItem>) => void, onCancel: () => void })
29
30**Decorator**: @Component
31
32**Atomic service API**: This API can be used in atomic services since API version 12.
33
34**System capability**: SystemCapability.ArkUI.ArkUI.Full
35
36**Parameters**
37
38
39| Name    | Type                            | Decorator| Mandatory| Description        |
40| -------- | -------------------------------- | ---------- | ---- | ------------ |
41| options  | [GridObjectSortComponentOptions](#gridobjectsortcomponentoptions) | @Prop      | Yes  | Component configuration.|
42| dataList | Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)> | -     | Yes  | Data to pass. The maximum data length is 50 characters. If it is exceeded, only the first 50 characters are used.|
43| onSave | (select: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>, unselect: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>)  => void | - | Yes| Callback invoked when changes are saved. The data after the changes is returned.|
44| onCancel | () => void | - | Yes| Callback invoked when changes are canceled.|
45
46##  GridObjectSortComponentOptions
47
48**Atomic service API**: This API can be used in atomic services since API version 12.
49
50| Name          | Type                     | Mandatory| Description                                                  |
51| -------------- | ------------------------- | ---- | ------------------------------------------------------ |
52| type           | [GridObjectSortComponentType](#gridobjectsortcomponenttype) | No  | Component display form: text only or\|text and imagery.<br>Default value: **GridObjectSortComponentType.text**|
53| imageSize      | number \| [Resource](ts-types.md#resource) | No  | Image size.<br>Default value: **56**                         |
54| normalTitle | [ResourceStr](ts-types.md#resourcestr)     | No  | Title displayed in the non-editing state.<br>Default value: **Channel**           |
55| showAreaTitle | [ResourceStr](ts-types.md#resourcestr)     | No  | First subtitle of the display area.<br>Default value: **Drag to sort**|
56| addAreaTitle | [ResourceStr](ts-types.md#resourcestr)     | No  | Second subtitle of the display area.<br>Default value: **Touch to add**           |
57| editTitle      | [ResourceStr](ts-types.md#resourcestr)     | No  | Title displayed in the editing state.<br>Default value: **Edit**            |
58
59## GridObjectSortComponentType 
60
61**Atomic service API**: This API can be used in atomic services since API version 12.
62
63| Name    | Value   | Description          |
64| -------- | ----- | -------------- |
65| IMAGE_TEXT | 'image_text' | Text and imagery.|
66| TEXT     | 'text'       | Text only.    |
67
68## GridObjectSortComponentItem
69
70**Atomic service API**: This API can be used in atomic services since API version 12.
71
72| Name    | Type                                  | Mandatory| Description                                                        |
73| -------- | -------------------------------------- | ---- | ------------------------------------------------------------ |
74| id       | string \| number                       | Yes  | Data ID, which must be unique.                                      |
75| text     | [ResourceStr](ts-types.md#resourcestr) | Yes  | Text information.                                              |
76| selected | boolean                                | Yes  | Whether the grid object has been added. The value **true** means that grid object has been added, and **false** means the opposite.                 |
77| url      | [ResourceStr](ts-types.md#resourcestr) | No  | URL of the image. This parameter is required when **GridObjectSortComponentType** is set to **IMAGE_TEXT**.|
78| order    | number                                 | Yes  | Sequence number.                                                  |
79
80##  Events
81
82The [universal events](ts-universal-events-click.md) are not supported.
83
84## Example
85
86```ts
87import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'
88
89@Entry
90@Component
91struct Index {
92  @State dataList: GridObjectSortComponentItem[] = [
93    {
94      id: 0,
95      url: $r('app.media.ic_controlcenter_location_filled'),
96      text: 'Location',
97      selected: true,
98      order: 3
99    },
100    {
101      id: 1,
102      url: $r('app.media.ic_controlcenter_mobiledata_filled'),
103      text: 'Mobile data',
104      selected: true,
105      order: 9
106    },
107    {
108      id: 2,
109      url: $r('app.media.ic_controlcenter_nfc_filled'),
110      text: 'NFC',
111      selected: false,
112      order: 1
113    },
114    {
115      id: 3,
116      url: $r('app.media.ic_controlcenter_ring_off_filled'),
117      text: 'Silent',
118      selected: true,
119      order: 4
120    },
121    {
122      id: 4,
123      url: $r('app.media.ic_controlcenter_ring_on_filled'),
124      text: 'Ring',
125      selected: false,
126      order: 5
127    },
128    {
129      id: 5,
130      url: $r('app.media.ic_controlcenter_ultra_power_saver_filled'),
131      text: 'Low power',
132      selected: true,
133      order: 6
134    },
135    {
136      id: 6,
137      url: $r('app.media.ic_controlcenter_screenshot_filled'),
138      text: 'Screenshot',
139      selected: true,
140      order: 7
141    },
142    {
143      id: 7,
144      url: $r('app.media.ic_controlcenter_screen_recording_filled'),
145      text: 'Screen recording',
146      selected: true,
147      order: 8
148    },
149    {
150      id: 8,
151      url: $r('app.media.ic_controlcenter_super_power_saver_filled'),
152      text: 'Ultra power saving',
153      selected: false,
154      order: 9
155    },
156  ]
157
158  @State option: GridObjectSortComponentOptions = {
159    type: GridObjectSortComponentType.IMAGE_TEXT,
160    imageSize: 45,
161    normalTitle: 'Menu',
162    editTitle: 'Edit',
163    showAreaTitle: 'Drag to sort',
164    addAreaTitle: 'Touch to add'
165  }
166
167  build() {
168    Column() {
169      GridObjectSortComponent({
170        options: this.option,
171        dataList: this.dataList,
172        onSave: (
173          select: Array<GridObjectSortComponentItem>,
174          unselect: Array<GridObjectSortComponentItem>
175        ) => {
176          // save ToDo
177        },
178        onCancel: () =>{
179          // cancel ToDo
180        }
181      })
182    }
183  }
184}
185```
186
187![GridObjectSortComponent](figures/GridObjectSortComponent.gif)
188