es-grid-template 1.2.2 → 1.2.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 (31) hide show
  1. package/assets/index.css +0 -17
  2. package/assets/index.scss +1082 -1063
  3. package/es/grid-component/ColumnsChoose.d.ts +1 -0
  4. package/es/grid-component/ColumnsChoose.js +351 -61
  5. package/es/grid-component/GridStyle.js +1 -1
  6. package/es/grid-component/InternalTable.js +7 -0
  7. package/es/grid-component/TableGrid.js +3 -2
  8. package/es/grid-component/hooks/useColumns.js +3 -3
  9. package/es/grid-component/hooks/useForceUpdate.d.ts +2 -0
  10. package/es/grid-component/hooks/useForceUpdate.js +5 -0
  11. package/es/grid-component/hooks/utils.d.ts +2 -0
  12. package/es/grid-component/hooks/utils.js +77 -16
  13. package/es/grid-component/styles.scss +22 -3
  14. package/es/grid-component/table/Grid.js +2 -1
  15. package/es/grid-component/table/GridEdit.js +72 -9
  16. package/es/grid-component/type.d.ts +1 -0
  17. package/lib/grid-component/ColumnsChoose.d.ts +1 -0
  18. package/lib/grid-component/ColumnsChoose.js +350 -60
  19. package/lib/grid-component/GridStyle.js +1 -1
  20. package/lib/grid-component/InternalTable.js +7 -0
  21. package/lib/grid-component/TableGrid.js +3 -2
  22. package/lib/grid-component/hooks/useColumns.js +3 -3
  23. package/lib/grid-component/hooks/useForceUpdate.d.ts +2 -0
  24. package/lib/grid-component/hooks/useForceUpdate.js +13 -0
  25. package/lib/grid-component/hooks/utils.d.ts +2 -0
  26. package/lib/grid-component/hooks/utils.js +81 -17
  27. package/lib/grid-component/styles.scss +22 -3
  28. package/lib/grid-component/table/Grid.js +2 -1
  29. package/lib/grid-component/table/GridEdit.js +71 -8
  30. package/lib/grid-component/type.d.ts +1 -0
  31. package/package.json +106 -106
@@ -5,5 +5,6 @@ export type IColumnsChoose<RecordType> = {
5
5
  columnsGroup?: string[];
6
6
  triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
7
7
  t?: any;
8
+ triggerChangeKeys?: any;
8
9
  };
9
10
  export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;
@@ -1,4 +1,326 @@
1
- import React, { Fragment, useMemo, useState } from "react";
1
+ // import React, {Fragment, useMemo, useState} from "react"
2
+ //
3
+ // import styled from "styled-components"
4
+ // import {Button, Input, Popover, Tooltip} from "antd";
5
+ // import {SettingOutlined} from "@ant-design/icons";
6
+ // import {
7
+ // getVisibleColumnKeys,
8
+ // updateColumns
9
+ // } from "./hooks";
10
+ //
11
+ // // import type {TableColumnsType} from "rc-master-ui";
12
+ // import Tree from "rc-master-ui/es/tree";
13
+ // import SearchOutlined from "@ant-design/icons/SearchOutlined";
14
+ // import type {ColumnsTable} from "./type";
15
+ // import useMergedState from "rc-util/lib/hooks/useMergedState";
16
+ //
17
+ //
18
+ // const BoxAction = styled.div`
19
+ // border-top: 1px solid #c4c4c4;
20
+ // padding-top: .75rem;
21
+ // display: flex;
22
+ // justify-content: end;
23
+ // gap: 10px;
24
+ //
25
+ // .btn-action {
26
+ // background: none !important;
27
+ // border: none !important;
28
+ // &.btn-action-submit {
29
+ // color: #df4318;
30
+ // &:disabled {
31
+ // background-color: #f0f0f0 !important;
32
+ // }
33
+ // &:hover {
34
+ // color: #df4318 !important;
35
+ // }
36
+ // }
37
+ //
38
+ // &:hover {
39
+ // background-color: #f0f0f0 !important;
40
+ // }
41
+ // }
42
+ // `
43
+ //
44
+ // export type IColumnsChoose<RecordType> = {
45
+ // columns: ColumnsTable<RecordType>
46
+ // columnsGroup?: string[]
47
+ // triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
48
+ // t?: any
49
+ //
50
+ // }
51
+ //
52
+ //
53
+ // export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
54
+ // const {
55
+ // columns: propsColumns,
56
+ // triggerChangeColumns,
57
+ // t,
58
+ // columnsGroup,
59
+ // } = props
60
+ //
61
+ // // const dataList: { key: React.Key; title: string }[] = [];
62
+ //
63
+ // // const defaultColumns = useMemo(() => {
64
+ // // return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
65
+ // // }, [propsColumns])
66
+ //
67
+ //
68
+ // // const columnsChooseRef: any = useRef()
69
+ // // const searchRef: any = useRef()
70
+ //
71
+ //
72
+ //
73
+ // // const [columns, setColumns] = useState<TableColumnsType>([])
74
+ //
75
+ // // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
76
+ //
77
+ // // const [isManualUpdate, setIsManualUpdate] = useState(false);
78
+ //
79
+ //
80
+ // // useEffect(() => {
81
+ // //
82
+ // // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
83
+ // // setColumns(defaultColumns as TableColumnsType)
84
+ // //
85
+ // // }, [propsColumns])
86
+ //
87
+ // const columns = useMemo(() => {
88
+ //
89
+ // // return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
90
+ // return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
91
+ // // setColumns(defaultColumns as TableColumnsType)
92
+ // }, [columnsGroup, propsColumns])
93
+ //
94
+ //
95
+ // // useEffect(() => {
96
+ // //
97
+ // // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
98
+ // //
99
+ // // const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
100
+ // //
101
+ // // if (!isManualUpdate) {
102
+ // // setSelectedKeys(defaultSelectedKeys)
103
+ // // }
104
+ // // setIsManualUpdate(false);
105
+ // //
106
+ // //
107
+ // // }, [isManualUpdate, propsColumns])
108
+ //
109
+ // const defaultSelectedKeys = React.useMemo(() => {
110
+ //
111
+ // const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
112
+ // return getVisibleColumnKeys(rs)
113
+ //
114
+ // }, [columnsGroup, propsColumns])
115
+ //
116
+ // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
117
+ // defaultSelectedKeys || [],
118
+ // {
119
+ // value: defaultSelectedKeys,
120
+ // },
121
+ // );
122
+ //
123
+ // //
124
+ // // const defaultSelectedKeys = useMemo(() => {
125
+ // //
126
+ // // return getVisibleColumnKeys(propsColumns)
127
+ // //
128
+ // // }, [propsColumns])
129
+ //
130
+ //
131
+ // const [clicked, setClicked] = useState(false);
132
+ // const [autoExpandParent, setAutoExpandParent] = useState(true);
133
+ //
134
+ //
135
+ // // const treeData = useMemo(() => {
136
+ // // const loop = (data: TreeDataNode[]): TreeDataNode[] =>
137
+ // // data.map((item) => {
138
+ // // const strTitle = item.title as string;
139
+ // // const index = strTitle.indexOf(searchValue);
140
+ // // const beforeStr = strTitle.substring(0, index);
141
+ // // const afterStr = strTitle.slice(index + searchValue.length);
142
+ // // const title =
143
+ // // index > -1 ? (
144
+ // // <span key={item.key}>
145
+ // // {beforeStr}
146
+ // // <span className="site-tree-search-value">{searchValue}</span>
147
+ // // {afterStr}
148
+ // // </span>
149
+ // // ) : (
150
+ // // <span key={item.key}>{strTitle}</span>
151
+ // // );
152
+ // // if (item.children) {
153
+ // // return { title, key: item.key, children: loop(item.children) };
154
+ // // }
155
+ // //
156
+ // // return {
157
+ // // title,
158
+ // // key: item.key,
159
+ // // };
160
+ // // });
161
+ // //
162
+ // // // return loop(defaultData);
163
+ // // return loop(columns as any);
164
+ // // }, [searchValue, columns]);
165
+ //
166
+ //
167
+ // const hide = () => {
168
+ // setClicked(false)
169
+ // }
170
+ //
171
+ // const handleClickChange = (open: boolean) => {
172
+ // setClicked(open)
173
+ // }
174
+ //
175
+ // const onExpand = () => {
176
+ // // setExpandedKeys(newExpandedKeys)
177
+ // setAutoExpandParent(false)
178
+ // }
179
+ //
180
+ // // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
181
+ // // let parentKey: React.Key
182
+ // // for (let i = 0; i < tree.length; i++) {
183
+ // // const node = tree[i]
184
+ // // if (node.children) {
185
+ // // if (node.children.some((item) => item.key === key)) {
186
+ // // parentKey = node.key
187
+ // // } else if (getParentKey(key, node.children)) {
188
+ // // parentKey = getParentKey(key, node.children)
189
+ // // }
190
+ // // }
191
+ // // }
192
+ // // return parentKey!
193
+ // // }
194
+ //
195
+ // // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
196
+ // const onChange = () => {
197
+ // // const { value } = e.target
198
+ // // const newExpandedKeys = dataList
199
+ // // .map((item) => {
200
+ // // if (item.title.indexOf(value) > -1) {
201
+ // // return getParentKey(item.key, defaultData)
202
+ // // }
203
+ // // return null
204
+ // // })
205
+ // // .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
206
+ // // setExpandedKeys(newExpandedKeys)
207
+ //
208
+ // // setSearchValue(value)
209
+ // setAutoExpandParent(true)
210
+ // };
211
+ //
212
+ // const onCheck = (keys: string[]) => {
213
+ //
214
+ // console.log('keys', keys)
215
+ // // setSelectedKeys(keys)
216
+ // setMergedSelectedKeys(keys)
217
+ // // setIsManualUpdate(true)
218
+ //
219
+ // }
220
+ //
221
+ // const handleAccept = () => {
222
+ //
223
+ // console.log('mergedSelectedKeys', mergedSelectedKeys)
224
+ //
225
+ // // const rs1 = updateColumns(propsColumns, selectedKeys)
226
+ // const rs1 = updateColumns(propsColumns, mergedSelectedKeys)
227
+ //
228
+ // console.log('rs1', rs1)
229
+ //
230
+ // triggerChangeColumns?.(rs1, 'columnChoose')
231
+ //
232
+ // hide()
233
+ //
234
+ // }
235
+ //
236
+ // const handleCancel = () => {
237
+ // // setSelectedKeys(defaultSelectedKeys)
238
+ // hide()
239
+ // }
240
+ //
241
+ //
242
+ // return (
243
+ // <Fragment>
244
+ // <Popover
245
+ // placement={'bottomLeft'}
246
+ // content={
247
+ // <div style={{minWidth: 250}}>
248
+ // <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
249
+ //
250
+ // <Tree
251
+ // onExpand={onExpand}
252
+ // // expandedKeys={expandedKeys}
253
+ // autoExpandParent={autoExpandParent}
254
+ // // treeData={treeData}
255
+ // treeData={columns}
256
+ // defaultExpandAll={true}
257
+ // checkable={true}
258
+ // // onSelect={(keys, info) => {
259
+ // // const key = info.node.key
260
+ // //
261
+ // // const find = findItemByKey(columns, 'key', key)
262
+ // //
263
+ // // // const tmpColumn
264
+ // //
265
+ // // // if (selectedKeys.includes(key as string)) {
266
+ // // // const rssss = findKeyPath(columns, key as string)
267
+ // // // const rs = selectedKeys.filter(item => !rssss.includes(item));
268
+ // // //
269
+ // // // setSelectedKeys(rs)
270
+ // // // } else {
271
+ // //
272
+ // // // const rs = [...selectedKeys, keys[0]]
273
+ // //
274
+ // // // setSelectedKeys(keys)
275
+ // // // }
276
+ // // }}
277
+ // onCheck={(keys) => onCheck(keys as string[])}
278
+ //
279
+ //
280
+ // multiple={true}
281
+ // // checkedKeys={selectedKeys}
282
+ //
283
+ // defaultCheckedKeys={mergedSelectedKeys}
284
+ // // defaultCheckedKeys={defaultSelectedKeys}
285
+ // // selectedKeys={[]}
286
+ //
287
+ // height={window.innerHeight - 200}
288
+ //
289
+ // />
290
+ //
291
+ //
292
+ // <BoxAction className={'px-1'}>
293
+ // <Button
294
+ // // className={classnames('btn-action btn-action-submit', {
295
+ // // // disable: !columns.find((item) => item.visible !== false || item.visible)
296
+ // // })}
297
+ // onClick={handleAccept}
298
+ // // disabled={!columns.find((item) => item.visible !== false || item.visible)}
299
+ // >
300
+ // {t ? t('OK') : 'OK'}
301
+ // {/*{'OK'}*/}
302
+ // </Button>
303
+ //
304
+ // {/*<Button className={'btn-action btn-action-cancel'} onClick={hide} >{('Cancel') }</Button>*/}
305
+ // <Button className={'btn-action btn-action-cancel'} onClick={handleCancel} >{t ? t('Cancel') : 'Cancel' }</Button>
306
+ // </BoxAction>
307
+ // </div>
308
+ // }
309
+ // trigger="click"
310
+ // open={clicked}
311
+ // onOpenChange={handleClickChange}
312
+ // arrow={false}
313
+ // >
314
+ // <Tooltip arrow={false} title={'Cài đặt'} >
315
+ // <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
316
+ // </Tooltip>
317
+ //
318
+ // </Popover>
319
+ // </Fragment>
320
+ // )
321
+ // }
322
+
323
+ import React, { Fragment, useEffect, useMemo, useState } from "react";
2
324
  import styled from "styled-components";
3
325
  import { Button, Input, Popover, Tooltip } from "antd";
4
326
  import { SettingOutlined } from "@ant-design/icons";
@@ -7,7 +329,6 @@ import { getVisibleColumnKeys, updateColumns } from "./hooks";
7
329
  // import type {TableColumnsType} from "rc-master-ui";
8
330
  import Tree from "rc-master-ui/es/tree";
9
331
  import SearchOutlined from "@ant-design/icons/SearchOutlined";
10
- import useMergedState from "rc-util/es/hooks/useMergedState";
11
332
  const BoxAction = styled.div.withConfig({
12
333
  displayName: "BoxAction",
13
334
  componentId: "es-grid-template__sc-1ix8yky-0"
@@ -16,6 +337,7 @@ export const ColumnsChoose = props => {
16
337
  const {
17
338
  columns: propsColumns,
18
339
  triggerChangeColumns,
340
+ triggerChangeKeys,
19
341
  t,
20
342
  columnsGroup
21
343
  } = props;
@@ -30,10 +352,8 @@ export const ColumnsChoose = props => {
30
352
  // const searchRef: any = useRef()
31
353
 
32
354
  // const [columns, setColumns] = useState<TableColumnsType>([])
33
-
34
- // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
35
-
36
- // const [isManualUpdate, setIsManualUpdate] = useState(false);
355
+ const [selectedKeys, setSelectedKeys] = useState([]);
356
+ const [isManualUpdate, setIsManualUpdate] = useState(false);
37
357
 
38
358
  // useEffect(() => {
39
359
  //
@@ -43,40 +363,22 @@ export const ColumnsChoose = props => {
43
363
  // }, [propsColumns])
44
364
 
45
365
  const columns = useMemo(() => {
46
- // return propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
47
- return propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false);
366
+ return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
48
367
  // setColumns(defaultColumns as TableColumnsType)
49
- }, [columnsGroup, propsColumns]);
50
-
51
- // useEffect(() => {
52
- //
53
- // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
54
- //
55
- // const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
56
- //
57
- // if (!isManualUpdate) {
58
- // setSelectedKeys(defaultSelectedKeys)
59
- // }
60
- // setIsManualUpdate(false);
61
- //
62
- //
63
- // }, [isManualUpdate, propsColumns])
64
-
65
- const defaultSelectedKeys = React.useMemo(() => {
66
- const rs = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
67
- return getVisibleColumnKeys(rs);
68
- }, [columnsGroup, propsColumns]);
69
- const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys || [], {
70
- value: defaultSelectedKeys
71
- });
72
-
73
- //
74
- // const defaultSelectedKeys = useMemo(() => {
75
- //
76
- // return getVisibleColumnKeys(propsColumns)
77
- //
78
- // }, [propsColumns])
79
-
368
+ }, [propsColumns]);
369
+ useEffect(() => {
370
+ // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
371
+ const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
372
+ const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns);
373
+ if (!isManualUpdate) {
374
+ setSelectedKeys(defaultSelectedKeys);
375
+ }
376
+ setIsManualUpdate(false);
377
+ }, [propsColumns]);
378
+ const defaultSelectedKeys = useMemo(() => {
379
+ const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
380
+ return getVisibleColumnKeys(defaultColumns);
381
+ }, [propsColumns]);
80
382
  const [clicked, setClicked] = useState(false);
81
383
  const [autoExpandParent, setAutoExpandParent] = useState(true);
82
384
 
@@ -154,19 +456,17 @@ export const ColumnsChoose = props => {
154
456
  setAutoExpandParent(true);
155
457
  };
156
458
  const onCheck = keys => {
157
- console.log('keys', keys);
158
- // setSelectedKeys(keys)
159
- setMergedSelectedKeys(keys);
160
- // setIsManualUpdate(true)
459
+ setSelectedKeys(keys);
460
+ setIsManualUpdate(true);
161
461
  };
162
462
  const handleAccept = () => {
163
- // const rs1 = updateColumns(propsColumns, selectedKeys)
164
- const rs1 = updateColumns(propsColumns, mergedSelectedKeys);
463
+ const rs1 = updateColumns(propsColumns, selectedKeys);
464
+ triggerChangeKeys?.(selectedKeys);
165
465
  triggerChangeColumns?.(rs1, 'columnChoose');
166
466
  hide();
167
467
  };
168
468
  const handleCancel = () => {
169
- // setSelectedKeys(defaultSelectedKeys)
469
+ setSelectedKeys(defaultSelectedKeys);
170
470
  hide();
171
471
  };
172
472
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
@@ -213,15 +513,12 @@ export const ColumnsChoose = props => {
213
513
  // }}
214
514
  ,
215
515
  onCheck: keys => onCheck(keys),
216
- multiple: true
217
- // checkedKeys={selectedKeys}
218
- ,
219
-
220
- defaultCheckedKeys: mergedSelectedKeys
516
+ multiple: true,
517
+ checkedKeys: selectedKeys,
518
+ defaultCheckedKeys: selectedKeys
221
519
  // defaultCheckedKeys={defaultSelectedKeys}
222
- // selectedKeys={[]}
223
520
  ,
224
-
521
+ selectedKeys: [],
225
522
  height: window.innerHeight - 200
226
523
  }), /*#__PURE__*/React.createElement(BoxAction, {
227
524
  className: 'px-1'
@@ -243,12 +540,5 @@ export const ColumnsChoose = props => {
243
540
  }, /*#__PURE__*/React.createElement(Tooltip, {
244
541
  arrow: false,
245
542
  title: 'Cài đặt'
246
- }, /*#__PURE__*/React.createElement(SettingOutlined, {
247
- size: 16,
248
- color: '#555555',
249
- style: {
250
- fontSize: 16,
251
- color: '#555555'
252
- }
253
- }))));
543
+ }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
254
544
  };
@@ -2,4 +2,4 @@ import styled from "styled-components";
2
2
  export const GridStyle = styled.div.withConfig({
3
3
  displayName: "GridStyle",
4
4
  componentId: "es-grid-template__sc-sueu2e-0"
5
- })([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);
5
+ })([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);
@@ -97,6 +97,7 @@ const InternalTable = props => {
97
97
  React.useEffect(() => {
98
98
  setColumns(propsColumns);
99
99
  }, [propsColumns]);
100
+ // }, [!!propsColumns.length && !!propsColumns])
100
101
 
101
102
  // const [data, setData] = useState<RecordType[]>([]);
102
103
 
@@ -149,6 +150,12 @@ const InternalTable = props => {
149
150
  // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
150
151
  const triggerChangeColumns = newColumns => {
151
152
  setColumns(newColumns);
153
+ if (tableRef.current) {
154
+ tableRef.current.scrollTo({
155
+ left: 0.1,
156
+ behavior: "smooth"
157
+ });
158
+ }
152
159
  onChooseColumns?.({
153
160
  showColumns: [],
154
161
  columns: [],
@@ -129,6 +129,7 @@ const TableGrid = props => {
129
129
  getRowKey,
130
130
  groupColumns,
131
131
  groupToolbar,
132
+ showEmptyText,
132
133
  ...rest
133
134
  } = props;
134
135
  const {
@@ -304,10 +305,10 @@ const TableGrid = props => {
304
305
  }, rest, {
305
306
  locale: {
306
307
  ...locale,
307
- emptyText: /*#__PURE__*/React.createElement(Empty, {
308
+ emptyText: showEmptyText !== false ? /*#__PURE__*/React.createElement(Empty, {
308
309
  image: Empty.PRESENTED_IMAGE_SIMPLE,
309
310
  description: locale?.emptyText
310
- })
311
+ }) : /*#__PURE__*/React.createElement(React.Fragment, null)
311
312
  },
312
313
  loading: {
313
314
  spinning: columns && columns.length === 0 || loading === true,
@@ -245,11 +245,11 @@ const useColumns = config => {
245
245
  }),
246
246
  onCell: data => {
247
247
  return {
248
- colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
248
+ colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
249
249
  zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
250
250
  className: classNames('', {
251
- 'cell-group': data.children,
252
- 'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
251
+ 'cell-group': groupColumns && data.children,
252
+ 'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
253
253
  })
254
254
  };
255
255
  },
@@ -0,0 +1,2 @@
1
+ import * as React from 'react';
2
+ export default function useForceUpdate(): React.DispatchWithoutAction;
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ export default function useForceUpdate() {
3
+ const [, forceUpdate] = React.useReducer(x => x + 1, 0);
4
+ return forceUpdate;
5
+ }
@@ -66,3 +66,5 @@ export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordTyp
66
66
  export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
67
67
  export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
68
68
  export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
69
+ export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
70
+ export declare const checkChild: (inputArray: any[]) => boolean;