es-grid-template 1.9.25 → 1.9.27

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 (24) hide show
  1. package/es/grid-component/type.d.ts +4 -5
  2. package/es/group-component/hook/utils.d.ts +3 -3
  3. package/es/table-component/TableContainer.js +2 -0
  4. package/es/table-component/body/TableBody.js +1 -1
  5. package/es/table-component/body/TableBodyCell.js +9 -9
  6. package/es/table-component/body/TableBodyCellEdit.js +4 -4
  7. package/es/table-component/body/TableBodyRow.js +5 -2
  8. package/es/table-component/footer/TableFooterRow.js +1 -1
  9. package/es/table-component/style.js +12 -9
  10. package/es/table-component/style.scss +2 -226
  11. package/es/table-component/table/Grid.js +2 -1
  12. package/es/table-component/useContext.d.ts +1 -0
  13. package/lib/grid-component/type.d.ts +4 -5
  14. package/lib/table-component/TableContainer.js +2 -0
  15. package/lib/table-component/body/TableBody.js +1 -1
  16. package/lib/table-component/body/TableBodyCell.js +9 -9
  17. package/lib/table-component/body/TableBodyCellEdit.js +4 -4
  18. package/lib/table-component/body/TableBodyRow.js +5 -2
  19. package/lib/table-component/footer/TableFooterRow.js +1 -1
  20. package/lib/table-component/style.js +11 -8
  21. package/lib/table-component/style.scss +2 -226
  22. package/lib/table-component/table/Grid.js +2 -1
  23. package/lib/table-component/useContext.d.ts +1 -0
  24. package/package.json +1 -1
package/es/grid-component/type.d.ts CHANGED
@@ -322,6 +322,10 @@ export type TableProps<RecordType = AnyObject> = {
322
322
  showHeader?: boolean;
323
323
  /** CSS class cho container table */
324
324
  className?: string;
325
+ /** striped class odd/even row table
326
+ * mặc định : true
327
+ */
328
+ striped?: boolean;
325
329
  /** Tiêu đề table */
326
330
  title?: ReactNode | ((data: RecordType) => ReactNode);
327
331
  /** Tiêu đề khi table ở chế độ fullscreen */
@@ -388,11 +392,6 @@ export type TableProps<RecordType = AnyObject> = {
388
392
  fullScreen?: boolean;
389
393
  /** Cấu hình phân trang, false để tắt */
390
394
  pagination?: false | PaginationConfig;
391
- /**
392
- * @deprecated
393
- * @since 1.9.25
394
- */
395
- showCustomTooltip?: boolean;
396
395
  /** Context Menu */
397
396
  /** Danh sách menu chuột phải */
398
397
  contextMenuItems?: ContextMenuItem[];
package/es/group-component/hook/utils.d.ts CHANGED
@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
194
194
  value: any;
195
195
  rowData: RecordType;
196
196
  }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
197
- onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
198
- onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
197
+ onCellStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
198
+ onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
199
199
  onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
200
- onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
200
+ onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "width" | "minWidth" | "left" | "right">);
201
201
  getValue?: (row: any, rowIndex: number) => any;
202
202
  getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
203
203
  headerCellProps?: import("./../../grid-component/type").CellProps;
package/es/table-component/TableContainer.js CHANGED
@@ -77,6 +77,7 @@ const TableContainer = props => {
77
77
  onExpandClick,
78
78
  setIsExpandClick,
79
79
  recordClick,
80
+ striped = true,
80
81
  ...rest
81
82
  } = props;
82
83
  const [paginationLocal] = useLocale('Pagination');
@@ -278,6 +279,7 @@ const TableContainer = props => {
278
279
  value: {
279
280
  t,
280
281
  locale,
282
+ striped,
281
283
  lang,
282
284
  prefix,
283
285
  id,
package/es/table-component/body/TableBody.js CHANGED
@@ -30,7 +30,7 @@ const TableBody = ({
30
30
  //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
31
31
  const rowVirtualizer = useVirtualizer({
32
32
  count: rows.length,
33
- estimateSize: () => 36,
33
+ estimateSize: () => 32,
34
34
  //estimate row height for accurate scrollbar dragging
35
35
  getScrollElement: () => tableContainerRef.current,
36
36
  //measure dynamic row height, except in firefox because it measures table border height incorrectly
package/es/table-component/body/TableBodyCell.js CHANGED
@@ -339,7 +339,7 @@ const TableBodyCell = props => {
339
339
  style: {
340
340
  ...cellStyles,
341
341
  display: 'flex',
342
- minHeight: 36,
342
+ minHeight: 32,
343
343
  width: cell.column.getSize(),
344
344
  minWidth: cell.column.getSize(),
345
345
  ...getCommonPinningStyles(cell.column)
@@ -390,22 +390,22 @@ const TableBodyCell = props => {
390
390
  style: {
391
391
  ...cellStyles,
392
392
  display: 'flex',
393
+ alignItems: 'center',
393
394
  width: cell.column.getSize(),
394
395
  minWidth: cell.column.getSize(),
395
- minHeight: 36,
396
+ minHeight: 32,
396
397
  ...getCommonPinningStyles(cell.column)
397
398
  },
398
399
  onMouseEnter: e => {
399
400
  if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
400
401
  setIsOpenTooltip(true);
401
402
  }
402
- }
403
-
404
- // onMouseLeave={() => {
405
- // setIsOpenTooltip(false)
406
- // }}
407
- ,
408
-
403
+ },
404
+ onMouseLeave: () => {
405
+ if (isOpenTooltip) {
406
+ setIsOpenTooltip(false);
407
+ }
408
+ },
409
409
  onKeyDown: e => {
410
410
  const flatRows = table.getRowModel().flatRows;
411
411
  if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
package/es/table-component/body/TableBodyCellEdit.js CHANGED
@@ -897,7 +897,7 @@ const TableBodyCellEdit = props => {
897
897
  }),
898
898
  style: {
899
899
  display: 'flex',
900
- height: '36px',
900
+ height: '32px',
901
901
  userSelect: 'none',
902
902
  width: cell.column.getSize(),
903
903
  // flexBasis: cell.column.getSize(),
@@ -986,7 +986,7 @@ const TableBodyCellEdit = props => {
986
986
  }),
987
987
  style: {
988
988
  display: 'flex',
989
- height: '36px',
989
+ height: '32px',
990
990
  width: cell.column.getSize(),
991
991
  minWidth: cell.column.getSize(),
992
992
  // flex: 1,
@@ -1012,7 +1012,7 @@ const TableBodyCellEdit = props => {
1012
1012
  }),
1013
1013
  style: {
1014
1014
  display: 'flex',
1015
- height: '36px',
1015
+ height: '32px',
1016
1016
  width: cell.column.getSize(),
1017
1017
  minWidth: cell.column.getSize(),
1018
1018
  // flex: 1,
@@ -1154,7 +1154,7 @@ const TableBodyCellEdit = props => {
1154
1154
  minWidth: cell.column.getSize(),
1155
1155
  // flex: 1,
1156
1156
  // maxWidth: cell.column.getSize(),
1157
- height: '36px',
1157
+ height: '32px',
1158
1158
  ...getCommonPinningStyles(cell.column),
1159
1159
  cursor: isPasting ? 'crosshair' : undefined
1160
1160
  },
package/es/table-component/body/TableBodyRow.js CHANGED
@@ -28,7 +28,8 @@ const TableBodyRow = ({
28
28
  focusedCell,
29
29
  rowClassName,
30
30
  rowEditable,
31
- onRowStyles
31
+ onRowStyles,
32
+ striped
32
33
  } = React.useContext(TableContext);
33
34
  const visibleCells = row.getVisibleCells();
34
35
  const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -53,7 +54,9 @@ const TableBodyRow = ({
53
54
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
54
55
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
55
56
  // [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) && row.originalSubRows.length > 0),
56
- [`${prefix}-grid-row-parent`]: row.getCanExpand()
57
+ [`${prefix}-grid-row-parent`]: row.getCanExpand(),
58
+ [`${prefix}-grid-row-odd`]: striped && virtualRow.index % 2 === 1,
59
+ [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
57
60
  }),
58
61
  style: {
59
62
  // display: 'flex',
package/es/table-component/footer/TableFooterRow.js CHANGED
@@ -16,7 +16,7 @@ const TableFooterRow = ({
16
16
  ...rowStyles,
17
17
  display: "grid",
18
18
  width: "100%",
19
- height: 37,
19
+ height: 32,
20
20
  gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
21
21
  },
22
22
  className: "ui-rc-grid-footer-row"
package/es/table-component/style.js CHANGED
@@ -1,19 +1,22 @@
1
- import styled from "styled-components";
1
+ import styled from 'styled-components';
2
2
  // const prefix = "ui-rc";
3
3
  // const antdPrefix = "ant";
4
- // const fontFamily = "Montserrat, Helvetica, Arial, serif ";
4
+ const fontFamily = 'Montserrat, Helvetica, Arial, serif ';
5
5
  // const borderRadius = "6px";
6
6
 
7
7
  // const boxShadowColor = "rgba(220, 0, 0, 0.09)";
8
- const color = "#000000de";
9
- const BgColor = "#ffffff ";
8
+ const color = '#000000';
9
+ const fontSize = '12px';
10
+ const fwBody = '500';
11
+ const fwHeader = '600';
12
+ const BgColor = '#ffffff ';
10
13
 
11
14
  // const primary = "#eb4619";
12
15
 
13
16
  // const rowHoverBg = "#FBDED6";
14
17
  // const rowSelectedBg = "#FEF2EF";
15
18
 
16
- const tableBorderColor = "#e0e0e0";
19
+ const tableBorderColor = '#e0e0e0';
17
20
 
18
21
  // const borderSelectedColor = "#0550C5";
19
22
  // const cellSelectedBg = "#F3F8FF";
@@ -23,7 +26,7 @@ const tableBorderColor = "#e0e0e0";
23
26
  // 404071
24
27
 
25
28
  // dark
26
- const tableBorderColorDark = "#44485E";
29
+ const tableBorderColorDark = '#44485E';
27
30
 
28
31
  // const rowHoverBgDark = "#404071 ";
29
32
 
@@ -34,8 +37,8 @@ const tableBorderColorDark = "#44485E";
34
37
 
35
38
  // const bodyColorDark = "#343e59";
36
39
 
37
- const BgColorDark = "#343e59 ";
38
- const colorDark = "#e6e4f3e6 ";
40
+ const BgColorDark = '#343e59 ';
41
+ const colorDark = '#e6e4f3e6 ';
39
42
 
40
43
  // const cellSelectedBgDark = " #F3F8FF ";
41
44
  // const cellIndexFocusBgDark = "#E6EFFD ";
@@ -45,4 +48,4 @@ const colorDark = "#e6e4f3e6 ";
45
48
  export const GridStyle = styled.div.withConfig({
46
49
  displayName: "GridStyle",
47
50
  componentId: "es-grid-template__sc-hdqm5k-0"
48
- })(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
51
+ })(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
package/es/table-component/style.scss CHANGED
@@ -33,9 +33,6 @@ $cell-selected-bg-Dark: #F3F8FF !default;
33
33
  $cell-index-focus-bg-Dark: #E6EFFD !default;
34
34
 
35
35
 
36
-
37
-
38
-
39
36
  * {
40
37
  box-sizing: border-box;
41
38
  }
@@ -43,12 +40,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
43
40
 
44
41
  .#{$prefix}-grid {
45
42
 
46
- // border: 1px solid $tableBorderColor;
47
-
48
- color: #000000de;
49
- background-color: #ffffff;
50
-
51
- font-size: 14px;
52
43
  .toolbar-icon {
53
44
  cursor: pointer;
54
45
  &:focus {
@@ -57,209 +48,13 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
57
48
  }
58
49
 
59
50
  table {
60
- // border-collapse: collapse;
61
51
  border-collapse: separate;
62
52
  border-spacing: 0;
63
53
  table-layout: fixed;
64
- // border: 1px solid $tableBorderColor;
65
54
  }
66
55
 
67
56
  .#{$prefix}-grid-container {
68
57
 
69
- // border: 1px solid $tableBorderColor;
70
- // border-right: 0;
71
- // font-size: 13px;
72
-
73
- // &::after {
74
- // content: "";
75
- // position: absolute;
76
- // top: 0px;
77
- // right: 0;
78
- // height: 100%;
79
- // border-right: 1px solid $tableBorderColor;
80
- // pointer-events: none;
81
- // z-index: 1;
82
- // }
83
-
84
- .#{$prefix}-grid-cell {
85
-
86
- padding: 7px 8px;
87
-
88
- &.#{$prefix}-grid-cell-text-center {
89
- text-align: center;
90
- justify-content: center;
91
-
92
- }
93
-
94
- &.#{$prefix}-grid-cell-text-right {
95
- justify-content: flex-end;
96
- text-align: right;
97
-
98
- }
99
-
100
- &.#{$prefix}-grid-cell-ellipsis {
101
-
102
-
103
- .ui-rc_cell-content {
104
- width: 100%;
105
- overflow: hidden;
106
- white-space: nowrap;
107
- text-overflow: ellipsis;
108
- word-break: keep-all;
109
-
110
- &.select-cell {
111
- padding-right: 18px;
112
- position: relative;
113
-
114
- }
115
-
116
- .caret-down {
117
- float: right;
118
- position: absolute;
119
- right: 0;
120
-
121
- &::before {
122
- content: '';
123
- display: inline-block;
124
- margin-left: 4px;
125
- vertical-align: middle;
126
- width: 0;
127
- height: 0;
128
- border-left: 5px solid transparent;
129
- border-right: 5px solid transparent;
130
- border-top: 5px solid #6f7777;
131
- }
132
- }
133
-
134
- }
135
-
136
- }
137
-
138
- &.#{$prefix}-grid-cell-wrap {
139
- white-space: normal;
140
- // overflow: hidden;
141
- text-overflow: ellipsis;
142
- word-break: break-word;
143
- }
144
-
145
- .#{$prefix}-grid-header-text-wrap {
146
- white-space: normal;
147
- overflow: hidden;
148
- text-overflow: ellipsis;
149
- word-break: break-word;
150
- }
151
-
152
- }
153
-
154
- .#{$prefix}-grid-thead {
155
- background-color: #ffffff;
156
- // background-color: inherit;
157
- font-weight: 500;
158
-
159
- .#{$prefix}-grid-cell {
160
- font-weight: inherit;
161
- color: #000000E0;
162
-
163
- background-color: inherit;
164
- border-inline-end: 1px solid $tableBorderColor;
165
- border-bottom: 1px solid $tableBorderColor;
166
-
167
- &.ui-rc-grid-cell-ellipsis {
168
-
169
- .ui-rc-table-column-title,
170
- .#{$prefix}-grid-cell-ellipsis {
171
- width: 100%;
172
- overflow: hidden;
173
- white-space: nowrap;
174
- text-overflow: ellipsis;
175
- word-break: keep-all;
176
- }
177
-
178
- }
179
-
180
- &.ui-rc-grid-cell-wrap {
181
-
182
- .ui-rc-table-column-title,
183
- .#{$prefix}-grid-cell-text-wrap {
184
- white-space: normal;
185
- word-break: break-word;
186
- overflow: hidden;
187
- }
188
-
189
- }
190
-
191
- &:hover {
192
- .ui-rc-header-trigger {
193
-
194
- .ui-rc-table-column-sorter-cancel {
195
- opacity: 1;
196
-
197
- }
198
-
199
- }
200
- }
201
-
202
-
203
- .#{$prefix}-grid-filter-column {
204
- display: flex;
205
- justify-content: space-between;
206
- width: 100%;
207
- align-items: center;
208
- position: relative;
209
- z-index: 3;
210
- }
211
-
212
- .ui-rc-header-trigger {
213
- padding-left: 6px;
214
- display: flex;
215
- align-items: center;
216
-
217
- .ui-rc-table-column-sorter-cancel {
218
- opacity: 0;
219
- }
220
-
221
- }
222
-
223
- .resizer {
224
-
225
- /* background: rgba(0, 0, 0, 0.5); */
226
- cursor: col-resize;
227
- height: 100%;
228
- position: absolute;
229
- right: 0;
230
- top: 0;
231
- z-index: 3;
232
- touch-action: none;
233
- user-select: none;
234
- width: 5px;
235
-
236
- // &::before {
237
- // content: '';
238
- // border-left: 2px solid blue;
239
- // }
240
- }
241
-
242
- .resizer.isResizing {
243
- // &::before {
244
- // content: '';
245
- // // border-left: 2px solid gray;
246
- // border-left: 2px solid rgb(70, 115, 228);
247
- // position: absolute;
248
- // // height: 50%;
249
- // height: 100%;
250
- // // top: 25%
251
- // }
252
-
253
- // background: blue;
254
- opacity: 1;
255
- }
256
-
257
-
258
-
259
-
260
- }
261
-
262
- }
263
58
 
264
59
  .#{$prefix}-grid-tbody {
265
60
 
@@ -271,8 +66,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
271
66
  display: flex;
272
67
  position: absolute;
273
68
  width: 100%;
274
- // background-color: #ffffff;
275
- background-color: inherit;
276
69
 
277
70
  &:hover {
278
71
  .#{$prefix}-grid-cell:not(.editable) {
@@ -896,24 +689,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
896
689
  .#{$prefix}-grid {
897
690
 
898
691
  .#{$prefix}-pagination {
899
- // &::before {
900
- // content: "";
901
- // position: absolute;
902
- // border-left: 1px solid $tableBorderColor;
903
- // height: 55px;
904
- // bottom: 0;
905
- // left: 0;
906
- // }
907
-
908
- // &::after {
909
- // content: "";
910
- // position: absolute;
911
- // border-left: 1px solid $tableBorderColor;
912
- // height: 55px;
913
- // bottom: 0;
914
- // visibility: visible;
915
- // right: 0;
916
- // }
692
+
917
693
 
918
694
  &.top-pagination {
919
695
  border: none;
@@ -925,7 +701,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
925
701
  }
926
702
  }
927
703
 
928
- padding: 10px;
704
+ padding: 7px;
929
705
 
930
706
  border-bottom: 1px solid $tableBorderColor;
931
707
  border-inline: 1px solid $tableBorderColor;
package/es/table-component/table/Grid.js CHANGED
@@ -383,7 +383,8 @@ const Grid = props => {
383
383
  },
384
384
  className: classNames(`${prefix}-grid ${tableClassNames}`, {
385
385
  [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
386
- [`${prefix}-grid-dark`]: theme?.theme === 'dark'
386
+ [`${prefix}-grid-dark`]: theme?.theme === 'dark',
387
+ [`table-striped`]: true
387
388
  }),
388
389
  style: {
389
390
  // minHeight: minHeight ?? undefined,
package/es/table-component/useContext.d.ts CHANGED
@@ -13,6 +13,7 @@ export interface IContext<T> {
13
13
  rowKey: string;
14
14
  originData: any[];
15
15
  dataSource: any[];
16
+ striped?: boolean;
16
17
  format?: IFormat;
17
18
  expandable?: ExpandableConfig<T>;
18
19
  wrapSettings?: IWrapSettings;
package/lib/grid-component/type.d.ts CHANGED
@@ -322,6 +322,10 @@ export type TableProps<RecordType = AnyObject> = {
322
322
  showHeader?: boolean;
323
323
  /** CSS class cho container table */
324
324
  className?: string;
325
+ /** striped class odd/even row table
326
+ * mặc định : true
327
+ */
328
+ striped?: boolean;
325
329
  /** Tiêu đề table */
326
330
  title?: ReactNode | ((data: RecordType) => ReactNode);
327
331
  /** Tiêu đề khi table ở chế độ fullscreen */
@@ -388,11 +392,6 @@ export type TableProps<RecordType = AnyObject> = {
388
392
  fullScreen?: boolean;
389
393
  /** Cấu hình phân trang, false để tắt */
390
394
  pagination?: false | PaginationConfig;
391
- /**
392
- * @deprecated
393
- * @since 1.9.25
394
- */
395
- showCustomTooltip?: boolean;
396
395
  /** Context Menu */
397
396
  /** Danh sách menu chuột phải */
398
397
  contextMenuItems?: ContextMenuItem[];
package/lib/table-component/TableContainer.js CHANGED
@@ -84,6 +84,7 @@ const TableContainer = props => {
84
84
  onExpandClick,
85
85
  setIsExpandClick,
86
86
  recordClick,
87
+ striped = true,
87
88
  ...rest
88
89
  } = props;
89
90
  const [paginationLocal] = (0, _locale.useLocale)('Pagination');
@@ -285,6 +286,7 @@ const TableContainer = props => {
285
286
  value: {
286
287
  t,
287
288
  locale,
289
+ striped,
288
290
  lang,
289
291
  prefix,
290
292
  id,
package/lib/table-component/body/TableBody.js CHANGED
@@ -41,7 +41,7 @@ const TableBody = ({
41
41
  //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
42
42
  const rowVirtualizer = (0, _reactVirtual.useVirtualizer)({
43
43
  count: rows.length,
44
- estimateSize: () => 36,
44
+ estimateSize: () => 32,
45
45
  //estimate row height for accurate scrollbar dragging
46
46
  getScrollElement: () => tableContainerRef.current,
47
47
  //measure dynamic row height, except in firefox because it measures table border height incorrectly
package/lib/table-component/body/TableBodyCell.js CHANGED
@@ -346,7 +346,7 @@ const TableBodyCell = props => {
346
346
  style: {
347
347
  ...cellStyles,
348
348
  display: 'flex',
349
- minHeight: 36,
349
+ minHeight: 32,
350
350
  width: cell.column.getSize(),
351
351
  minWidth: cell.column.getSize(),
352
352
  ...(0, _utils.getCommonPinningStyles)(cell.column)
@@ -397,22 +397,22 @@ const TableBodyCell = props => {
397
397
  style: {
398
398
  ...cellStyles,
399
399
  display: 'flex',
400
+ alignItems: 'center',
400
401
  width: cell.column.getSize(),
401
402
  minWidth: cell.column.getSize(),
402
- minHeight: 36,
403
+ minHeight: 32,
403
404
  ...(0, _utils.getCommonPinningStyles)(cell.column)
404
405
  },
405
406
  onMouseEnter: e => {
406
407
  if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
407
408
  setIsOpenTooltip(true);
408
409
  }
409
- }
410
-
411
- // onMouseLeave={() => {
412
- // setIsOpenTooltip(false)
413
- // }}
414
- ,
415
-
410
+ },
411
+ onMouseLeave: () => {
412
+ if (isOpenTooltip) {
413
+ setIsOpenTooltip(false);
414
+ }
415
+ },
416
416
  onKeyDown: e => {
417
417
  const flatRows = table.getRowModel().flatRows;
418
418
  if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
package/lib/table-component/body/TableBodyCellEdit.js CHANGED
@@ -904,7 +904,7 @@ const TableBodyCellEdit = props => {
904
904
  }),
905
905
  style: {
906
906
  display: 'flex',
907
- height: '36px',
907
+ height: '32px',
908
908
  userSelect: 'none',
909
909
  width: cell.column.getSize(),
910
910
  // flexBasis: cell.column.getSize(),
@@ -993,7 +993,7 @@ const TableBodyCellEdit = props => {
993
993
  }),
994
994
  style: {
995
995
  display: 'flex',
996
- height: '36px',
996
+ height: '32px',
997
997
  width: cell.column.getSize(),
998
998
  minWidth: cell.column.getSize(),
999
999
  // flex: 1,
@@ -1019,7 +1019,7 @@ const TableBodyCellEdit = props => {
1019
1019
  }),
1020
1020
  style: {
1021
1021
  display: 'flex',
1022
- height: '36px',
1022
+ height: '32px',
1023
1023
  width: cell.column.getSize(),
1024
1024
  minWidth: cell.column.getSize(),
1025
1025
  // flex: 1,
@@ -1161,7 +1161,7 @@ const TableBodyCellEdit = props => {
1161
1161
  minWidth: cell.column.getSize(),
1162
1162
  // flex: 1,
1163
1163
  // maxWidth: cell.column.getSize(),
1164
- height: '36px',
1164
+ height: '32px',
1165
1165
  ...(0, _utils.getCommonPinningStyles)(cell.column),
1166
1166
  cursor: isPasting ? 'crosshair' : undefined
1167
1167
  },
package/lib/table-component/body/TableBodyRow.js CHANGED
@@ -35,7 +35,8 @@ const TableBodyRow = ({
35
35
  focusedCell,
36
36
  rowClassName,
37
37
  rowEditable,
38
- onRowStyles
38
+ onRowStyles,
39
+ striped
39
40
  } = _react.default.useContext(_useContext.TableContext);
40
41
  const visibleCells = row.getVisibleCells();
41
42
  const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -60,7 +61,9 @@ const TableBodyRow = ({
60
61
  [`${prefix}-grid-row-selected`]: row.getIsSelected(),
61
62
  [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
62
63
  // [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) && row.originalSubRows.length > 0),
63
- [`${prefix}-grid-row-parent`]: row.getCanExpand()
64
+ [`${prefix}-grid-row-parent`]: row.getCanExpand(),
65
+ [`${prefix}-grid-row-odd`]: striped && virtualRow.index % 2 === 1,
66
+ [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
64
67
  }),
65
68
  style: {
66
69
  // display: 'flex',
package/lib/table-component/footer/TableFooterRow.js CHANGED
@@ -23,7 +23,7 @@ const TableFooterRow = ({
23
23
  ...rowStyles,
24
24
  display: "grid",
25
25
  width: "100%",
26
- height: 37,
26
+ height: 32,
27
27
  gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
28
28
  },
29
29
  className: "ui-rc-grid-footer-row"
package/lib/table-component/style.js CHANGED
@@ -8,19 +8,22 @@ exports.GridStyle = void 0;
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  // const prefix = "ui-rc";
10
10
  // const antdPrefix = "ant";
11
- // const fontFamily = "Montserrat, Helvetica, Arial, serif ";
11
+ const fontFamily = 'Montserrat, Helvetica, Arial, serif ';
12
12
  // const borderRadius = "6px";
13
13
 
14
14
  // const boxShadowColor = "rgba(220, 0, 0, 0.09)";
15
- const color = "#000000de";
16
- const BgColor = "#ffffff ";
15
+ const color = '#000000';
16
+ const fontSize = '12px';
17
+ const fwBody = '500';
18
+ const fwHeader = '600';
19
+ const BgColor = '#ffffff ';
17
20
 
18
21
  // const primary = "#eb4619";
19
22
 
20
23
  // const rowHoverBg = "#FBDED6";
21
24
  // const rowSelectedBg = "#FEF2EF";
22
25
 
23
- const tableBorderColor = "#e0e0e0";
26
+ const tableBorderColor = '#e0e0e0';
24
27
 
25
28
  // const borderSelectedColor = "#0550C5";
26
29
  // const cellSelectedBg = "#F3F8FF";
@@ -30,7 +33,7 @@ const tableBorderColor = "#e0e0e0";
30
33
  // 404071
31
34
 
32
35
  // dark
33
- const tableBorderColorDark = "#44485E";
36
+ const tableBorderColorDark = '#44485E';
34
37
 
35
38
  // const rowHoverBgDark = "#404071 ";
36
39
 
@@ -41,8 +44,8 @@ const tableBorderColorDark = "#44485E";
41
44
 
42
45
  // const bodyColorDark = "#343e59";
43
46
 
44
- const BgColorDark = "#343e59 ";
45
- const colorDark = "#e6e4f3e6 ";
47
+ const BgColorDark = '#343e59 ';
48
+ const colorDark = '#e6e4f3e6 ';
46
49
 
47
50
  // const cellSelectedBgDark = " #F3F8FF ";
48
51
  // const cellIndexFocusBgDark = "#E6EFFD ";
@@ -52,4 +55,4 @@ const colorDark = "#e6e4f3e6 ";
52
55
  const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
53
56
  displayName: "GridStyle",
54
57
  componentId: "es-grid-template__sc-hdqm5k-0"
55
- })(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
58
+ })(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
package/lib/table-component/style.scss CHANGED
@@ -33,9 +33,6 @@ $cell-selected-bg-Dark: #F3F8FF !default;
33
33
  $cell-index-focus-bg-Dark: #E6EFFD !default;
34
34
 
35
35
 
36
-
37
-
38
-
39
36
  * {
40
37
  box-sizing: border-box;
41
38
  }
@@ -43,12 +40,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
43
40
 
44
41
  .#{$prefix}-grid {
45
42
 
46
- // border: 1px solid $tableBorderColor;
47
-
48
- color: #000000de;
49
- background-color: #ffffff;
50
-
51
- font-size: 14px;
52
43
  .toolbar-icon {
53
44
  cursor: pointer;
54
45
  &:focus {
@@ -57,209 +48,13 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
57
48
  }
58
49
 
59
50
  table {
60
- // border-collapse: collapse;
61
51
  border-collapse: separate;
62
52
  border-spacing: 0;
63
53
  table-layout: fixed;
64
- // border: 1px solid $tableBorderColor;
65
54
  }
66
55
 
67
56
  .#{$prefix}-grid-container {
68
57
 
69
- // border: 1px solid $tableBorderColor;
70
- // border-right: 0;
71
- // font-size: 13px;
72
-
73
- // &::after {
74
- // content: "";
75
- // position: absolute;
76
- // top: 0px;
77
- // right: 0;
78
- // height: 100%;
79
- // border-right: 1px solid $tableBorderColor;
80
- // pointer-events: none;
81
- // z-index: 1;
82
- // }
83
-
84
- .#{$prefix}-grid-cell {
85
-
86
- padding: 7px 8px;
87
-
88
- &.#{$prefix}-grid-cell-text-center {
89
- text-align: center;
90
- justify-content: center;
91
-
92
- }
93
-
94
- &.#{$prefix}-grid-cell-text-right {
95
- justify-content: flex-end;
96
- text-align: right;
97
-
98
- }
99
-
100
- &.#{$prefix}-grid-cell-ellipsis {
101
-
102
-
103
- .ui-rc_cell-content {
104
- width: 100%;
105
- overflow: hidden;
106
- white-space: nowrap;
107
- text-overflow: ellipsis;
108
- word-break: keep-all;
109
-
110
- &.select-cell {
111
- padding-right: 18px;
112
- position: relative;
113
-
114
- }
115
-
116
- .caret-down {
117
- float: right;
118
- position: absolute;
119
- right: 0;
120
-
121
- &::before {
122
- content: '';
123
- display: inline-block;
124
- margin-left: 4px;
125
- vertical-align: middle;
126
- width: 0;
127
- height: 0;
128
- border-left: 5px solid transparent;
129
- border-right: 5px solid transparent;
130
- border-top: 5px solid #6f7777;
131
- }
132
- }
133
-
134
- }
135
-
136
- }
137
-
138
- &.#{$prefix}-grid-cell-wrap {
139
- white-space: normal;
140
- // overflow: hidden;
141
- text-overflow: ellipsis;
142
- word-break: break-word;
143
- }
144
-
145
- .#{$prefix}-grid-header-text-wrap {
146
- white-space: normal;
147
- overflow: hidden;
148
- text-overflow: ellipsis;
149
- word-break: break-word;
150
- }
151
-
152
- }
153
-
154
- .#{$prefix}-grid-thead {
155
- background-color: #ffffff;
156
- // background-color: inherit;
157
- font-weight: 500;
158
-
159
- .#{$prefix}-grid-cell {
160
- font-weight: inherit;
161
- color: #000000E0;
162
-
163
- background-color: inherit;
164
- border-inline-end: 1px solid $tableBorderColor;
165
- border-bottom: 1px solid $tableBorderColor;
166
-
167
- &.ui-rc-grid-cell-ellipsis {
168
-
169
- .ui-rc-table-column-title,
170
- .#{$prefix}-grid-cell-ellipsis {
171
- width: 100%;
172
- overflow: hidden;
173
- white-space: nowrap;
174
- text-overflow: ellipsis;
175
- word-break: keep-all;
176
- }
177
-
178
- }
179
-
180
- &.ui-rc-grid-cell-wrap {
181
-
182
- .ui-rc-table-column-title,
183
- .#{$prefix}-grid-cell-text-wrap {
184
- white-space: normal;
185
- word-break: break-word;
186
- overflow: hidden;
187
- }
188
-
189
- }
190
-
191
- &:hover {
192
- .ui-rc-header-trigger {
193
-
194
- .ui-rc-table-column-sorter-cancel {
195
- opacity: 1;
196
-
197
- }
198
-
199
- }
200
- }
201
-
202
-
203
- .#{$prefix}-grid-filter-column {
204
- display: flex;
205
- justify-content: space-between;
206
- width: 100%;
207
- align-items: center;
208
- position: relative;
209
- z-index: 3;
210
- }
211
-
212
- .ui-rc-header-trigger {
213
- padding-left: 6px;
214
- display: flex;
215
- align-items: center;
216
-
217
- .ui-rc-table-column-sorter-cancel {
218
- opacity: 0;
219
- }
220
-
221
- }
222
-
223
- .resizer {
224
-
225
- /* background: rgba(0, 0, 0, 0.5); */
226
- cursor: col-resize;
227
- height: 100%;
228
- position: absolute;
229
- right: 0;
230
- top: 0;
231
- z-index: 3;
232
- touch-action: none;
233
- user-select: none;
234
- width: 5px;
235
-
236
- // &::before {
237
- // content: '';
238
- // border-left: 2px solid blue;
239
- // }
240
- }
241
-
242
- .resizer.isResizing {
243
- // &::before {
244
- // content: '';
245
- // // border-left: 2px solid gray;
246
- // border-left: 2px solid rgb(70, 115, 228);
247
- // position: absolute;
248
- // // height: 50%;
249
- // height: 100%;
250
- // // top: 25%
251
- // }
252
-
253
- // background: blue;
254
- opacity: 1;
255
- }
256
-
257
-
258
-
259
-
260
- }
261
-
262
- }
263
58
 
264
59
  .#{$prefix}-grid-tbody {
265
60
 
@@ -271,8 +66,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
271
66
  display: flex;
272
67
  position: absolute;
273
68
  width: 100%;
274
- // background-color: #ffffff;
275
- background-color: inherit;
276
69
 
277
70
  &:hover {
278
71
  .#{$prefix}-grid-cell:not(.editable) {
@@ -896,24 +689,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
896
689
  .#{$prefix}-grid {
897
690
 
898
691
  .#{$prefix}-pagination {
899
- // &::before {
900
- // content: "";
901
- // position: absolute;
902
- // border-left: 1px solid $tableBorderColor;
903
- // height: 55px;
904
- // bottom: 0;
905
- // left: 0;
906
- // }
907
-
908
- // &::after {
909
- // content: "";
910
- // position: absolute;
911
- // border-left: 1px solid $tableBorderColor;
912
- // height: 55px;
913
- // bottom: 0;
914
- // visibility: visible;
915
- // right: 0;
916
- // }
692
+
917
693
 
918
694
  &.top-pagination {
919
695
  border: none;
@@ -925,7 +701,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
925
701
  }
926
702
  }
927
703
 
928
- padding: 10px;
704
+ padding: 7px;
929
705
 
930
706
  border-bottom: 1px solid $tableBorderColor;
931
707
  border-inline: 1px solid $tableBorderColor;
package/lib/table-component/table/Grid.js CHANGED
@@ -388,7 +388,8 @@ const Grid = props => {
388
388
  },
389
389
  className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
390
390
  [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
391
- [`${prefix}-grid-dark`]: theme?.theme === 'dark'
391
+ [`${prefix}-grid-dark`]: theme?.theme === 'dark',
392
+ [`table-striped`]: true
392
393
  }),
393
394
  style: {
394
395
  // minHeight: minHeight ?? undefined,
package/lib/table-component/useContext.d.ts CHANGED
@@ -13,6 +13,7 @@ export interface IContext<T> {
13
13
  rowKey: string;
14
14
  originData: any[];
15
15
  dataSource: any[];
16
+ striped?: boolean;
16
17
  format?: IFormat;
17
18
  expandable?: ExpandableConfig<T>;
18
19
  wrapSettings?: IWrapSettings;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "es-grid-template",
3
- "version": "1.9.25",
3
+ "version": "1.9.27",
4
4
  "description": "es-grid-template",
5
5
  "keywords": [
6
6
  "react",