@linzjs/step-ag-grid 29.11.3 → 29.11.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/src/contexts/GridContext.d.ts +1 -1
  2. package/dist/step-ag-grid.cjs +118 -79
  3. package/dist/step-ag-grid.cjs.map +1 -1
  4. package/dist/step-ag-grid.esm.js +119 -80
  5. package/dist/step-ag-grid.esm.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/Grid.tsx +94 -65
  8. package/src/contexts/GridContext.tsx +3 -3
  9. package/src/contexts/GridContextProvider.tsx +34 -20
  10. package/src/stories/grid/GridPopoutEditGeneric.stories.tsx +9 -3
  11. package/src/stories/grid/gridAutosize/GridAutoSize.stories.tsx +84 -0
  12. package/src/stories/grid/gridAutosize/GridFitSize.stories.tsx +84 -0
  13. package/src/stories/grid/gridAutosize/GridFitSizeFlex.stories.tsx +86 -0
  14. package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx +49 -16
package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx CHANGED
@@ -10,13 +10,15 @@ import {
10
10
  PanelHeader,
11
11
  PanelsContextProvider,
12
12
  } from '@linzjs/windows';
13
- import { useContext, useMemo, useState } from 'react';
13
+ import { useContext, useEffect, useMemo, useState } from 'react';
14
14
 
15
15
  import {
16
16
  ColDefT,
17
17
  Grid,
18
18
  GridCell,
19
19
  GridContextProvider,
20
+ GridFilterColumnsToggle,
21
+ GridFilters,
20
22
  GridIcon,
21
23
  GridPopoverMenu,
22
24
  GridPopoverMessage,
@@ -93,11 +95,13 @@ export const PanelContentsWithResize = () => {
93
95
  GridCell({
94
96
  field: 'age',
95
97
  headerName: 'Age',
98
+ width: 80,
99
+ flex: 1,
96
100
  }),
97
101
  GridCell({
98
102
  field: 'desc',
99
103
  headerName: 'Description',
100
- flex: 1,
104
+ flex: 2,
101
105
  }),
102
106
  GridPopoverMessage(
103
107
  {
@@ -148,28 +152,57 @@ export const PanelContentsWithResize = () => {
148
152
  [],
149
153
  );
150
154
 
151
- const [rowData] = useState([
152
- /* Your grid row data */
153
- /* exclude */
154
- {
155
- id: 1000,
156
- position: 'Tester',
157
- age: 30,
158
- desc: 'Tests application',
159
- dd: '1',
160
- },
161
- { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
162
- { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
163
- /* exclude */
164
- ]);
155
+ const [rowData, setRowData] = useState<ITestRow[] | null>(null);
156
+
157
+ useEffect(() => {
158
+ setTimeout(() => {
159
+ setRowData([
160
+ {
161
+ id: 1000,
162
+ position: 'Tester',
163
+ age: 30,
164
+ desc: 'Tests application',
165
+ dd: '1',
166
+ },
167
+ { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
168
+ { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
169
+ /* exclude */
170
+ ]);
171
+ }, 2000);
172
+ setTimeout(() => {
173
+ setRowData([
174
+ {
175
+ id: 1000,
176
+ position: 'Tester',
177
+ age: 30,
178
+ desc: 'Tests application',
179
+ dd: '1',
180
+ },
181
+ {
182
+ id: 1001,
183
+ position: 'Developer DeveloperDeveloper DeveloperDeveloper DeveloperDeveloper DeveloperDeveloper Developer',
184
+ age: 12,
185
+ desc: 'Develops application',
186
+ dd: '2',
187
+ },
188
+ { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
189
+ /* exclude */
190
+ ]);
191
+ }, 5000);
192
+ }, []);
165
193
 
166
194
  return (
167
195
  <GridUpdatingContextProvider>
168
196
  <GridContextProvider>
169
197
  <GridWrapper>
198
+ <GridFilters>
199
+ <GridFilterColumnsToggle />
200
+ </GridFilters>
170
201
  <Grid
171
202
  columnDefs={columnDefs}
172
203
  rowData={rowData}
204
+ selectable={true}
205
+ hideSelectColumn={true}
173
206
  onContentSize={initialResizePanel}
174
207
  sizeColumns={'auto-skip-headers'}
175
208
  />