(props: TableTr
>
);
}
+ if (keyName.fixed) {
+ if (keyName.fixed === 'right') {
+ objs.className = `${objs.className} ${prefixCls}-fixed-right`;
+ } else {
+ objs.className = `${objs.className} ${prefixCls}-fixed-true`;
+ }
+ }
return (
+ {objs.children}
+
+ }
key={colNum}
- // style={keyName?.style}
- className={`${objs.className || ''} ${prefixCls}-tr-children-${keyName.align || 'left'} ${
- keyName.className || ''
+ className={`${prefixCls}-tr-children-${keyName.align || 'left'} ${keyName.className || ''} ${
+ objs.className || ''
}`}
onClick={(evn) => onCell(trData, { rowNum, colNum, keyName: keyName.key! }, evn)}
/>
diff --git a/packages/react-table/src/ThComponent.tsx b/packages/react-table/src/ThComponent.tsx
new file mode 100644
index 0000000000..75bcf81a6f
--- /dev/null
+++ b/packages/react-table/src/ThComponent.tsx
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { TableColumns, TableProps, LocationWidth } from './';
+import { locationFixed } from './util';
+
+interface ThComponentProps {
+ colNum: number;
+ item: TableColumns;
+ prefixCls: string;
+ titleNode: JSX.Element;
+ onCellHead: TableProps['onCellHead'];
+ rowNum: number;
+ locationWidth: { [key: number]: LocationWidth };
+ updateLocation: (params: LocationWidth, index: number) => void;
+}
+export default class ThComponent extends Component> {
+ componentDidMount() {
+ const rect = ReactDOM.findDOMNode(this);
+ this.props.updateLocation({ width: (rect as any).getBoundingClientRect().width }, this.props.colNum);
+ }
+
+ render() {
+ const { colNum, prefixCls, item, titleNode, onCellHead, rowNum, locationWidth } = this.props;
+ const { title, key, render, children, ellipsis, fixed = false, ...thProps } = item;
+ let cls = '';
+ if (fixed) {
+ if (fixed === 'right') {
+ cls = prefixCls + '-fixed-right';
+ } else {
+ cls = prefixCls + '-fixed-true';
+ }
+ }
+ return (
+ onCellHead?.(item, colNum, rowNum!, evn)}
+ >
+ {titleNode}
+ |
+ );
+ }
+}
diff --git a/packages/react-table/src/Thead.tsx b/packages/react-table/src/Thead.tsx
index 7af3e644da..5cffc332c0 100644
--- a/packages/react-table/src/Thead.tsx
+++ b/packages/react-table/src/Thead.tsx
@@ -1,19 +1,30 @@
import React from 'react';
import { IProps, noop } from '@uiw/utils';
-import { TableProps, TableColumns } from './';
+import { TableProps, TableColumns, LocationWidth } from './';
import './style/index.less';
+import ThComponentProps from './ThComponent';
export interface TheadProps extends IProps {
data?: TableColumns[][];
onCellHead?: TableProps['onCellHead'];
align?: TableColumns['align'];
className?: TableColumns['className'];
+ locationWidth?: { [key: number]: LocationWidth };
+ updateLocation?: (params: LocationWidth, index: number) => void;
}
export default function TheadComponent(
props: TheadProps & React.HTMLAttributes = {},
) {
- const { prefixCls = 'w-table', className, data = [], onCellHead = noop, ...other } = props;
+ const {
+ prefixCls = 'w-table',
+ className,
+ data = [],
+ onCellHead = noop,
+ locationWidth,
+ updateLocation,
+ ...other
+ } = props;
return (
{data &&
@@ -21,24 +32,27 @@ export default function TheadComponent(
data.map((tds?: TableColumns[], rowNum?: number) => (
{(tds || []).map((item, colNum) => {
- const { title, key, render, children, ellipsis, ...thProps } = item;
- const titleNode: TableColumns['title'] =
- typeof title === 'function' ? title(item, colNum, rowNum!) : title;
+ const { title, key, render, children, ellipsis, fixed = false, ...thProps } = item;
+ const titleNode: TableColumns['title'] = (
+
+ {typeof title === 'function' ? title(item, colNum, rowNum!) : title}
+
+ );
if (thProps.colSpan === 0) {
return null;
}
- if (ellipsis) {
- thProps.className = `${thProps.className || ''} ${prefixCls}-ellipsis`;
- }
return (
- onCellHead(item, colNum, rowNum!, evn)}
- >
- {titleNode}
- |
+ prefixCls={prefixCls}
+ onCellHead={onCellHead}
+ rowNum={rowNum!}
+ titleNode={titleNode}
+ locationWidth={locationWidth!}
+ updateLocation={updateLocation!}
+ />
);
})}
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 1beef63205..445e4492ce 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useRef } from 'react';
import { IProps, HTMLDivProps, noop } from '@uiw/utils';
import Icon from '@uiw/react-icon';
import Thead from './Thead';
@@ -42,6 +42,7 @@ export type TableColumns = {
style?: React.CSSProperties;
align?: 'left' | 'center' | 'right';
className?: string;
+ fixed?: boolean | 'left' | 'right';
[key: string]: any;
};
@@ -69,6 +70,11 @@ export interface TableProps exten
scroll?: { x?: React.CSSProperties['width']; y?: React.CSSProperties['height'] };
}
+export interface LocationWidth {
+ left?: number;
+ right?: number;
+ width: number;
+}
export interface ICellOptions {
rowNum: number;
colNum: number;
@@ -93,6 +99,37 @@ export default function Table(props: TablePro
...other
} = props;
const [expandIndex, setExpandIndex] = useState>([]);
+ const [locationWidth, setLocationWidth] = useState<{ [key: number]: LocationWidth }>({});
+ const finalLocationWidth = useRef<{ [key: number]: LocationWidth }>({});
+ const updateLocation = (params: LocationWidth, index: number) => {
+ finalLocationWidth.current = {
+ ...finalLocationWidth.current,
+ [index]: {
+ ...finalLocationWidth.current[index],
+ ...params,
+ },
+ };
+ if (index === columns.length - 1) {
+ setLocationWidth(computed());
+ }
+ };
+ const computed = () => {
+ let left = 0,
+ right = 0;
+ for (let index = 0; index < columns.length; index++) {
+ if (finalLocationWidth.current[index]) {
+ finalLocationWidth.current[index].left = left;
+ left = finalLocationWidth.current[index].width + left;
+ }
+ }
+ for (let index = columns.length - 1; index > -1; index--) {
+ if (finalLocationWidth.current[index]) {
+ finalLocationWidth.current[index].right = right;
+ right = finalLocationWidth.current[index].width + right;
+ }
+ }
+ return finalLocationWidth.current;
+ };
useEffect(() => {
if (expandable) {
if (expandable.defaultExpandAllRows) {
@@ -215,11 +252,19 @@ export default function Table(props: TablePro
{title && {title}}
- {columns && columns.length > 0 && }
+ {columns && columns.length > 0 && (
+
+ )}
{data && data.length > 0 && (
tbody > tr {
transition: all 0.3s;
+ > td {
+ background-color: #fff;
+ position: relative;
+ z-index: 1;
+ }
&:hover,
&:hover:nth-child(2n) {
- background-color: #efefef;
+ > td {
+ background-color: #efefef;
+ }
}
&:nth-child(2n) {
- background-color: #f9f9f9;
+ > td {
+ background-color: #f9f9f9;
+ }
}
}
> thead {
> tr > th {
font-weight: normal;
padding: 8px;
+ background-color: #f6f9fb;
+ position: relative;
+ z-index: 1;
}
> tr,
tr:nth-child(2n) {
@@ -47,6 +59,7 @@
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
+ display: block;
}
&-tr-children-center {
text-align: center;
@@ -57,6 +70,41 @@
&-tr-children-right {
text-align: right;
}
+ &-fixed-true {
+ position: sticky !important;
+ z-index: 2 !important;
+ // border: 0; 透风 1px
+ }
+ &-fixed-right {
+ position: sticky !important;
+ z-index: 2 !important;
+ // border: 0; 透风 1px
+ }
+ &-fixed-true::after {
+ box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 15%);
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: -1px;
+ width: 30px;
+ transform: translateX(100%);
+ transition: box-shadow 0.3s;
+ content: '';
+ pointer-events: none;
+ }
+ &-fixed-right::after {
+ box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 15%);
+ position: absolute;
+ top: 0;
+ bottom: -1px;
+ left: 0;
+ width: 30px;
+ transform: translateX(-100%);
+ transition: box-shadow 0.3s;
+ content: '';
+ pointer-events: none;
+ border-right: 1px solid #f0f0f0;
+ }
&-bordered {
> table {
tr > th,
diff --git a/packages/react-table/src/util.ts b/packages/react-table/src/util.ts
index 68a0c8236f..5f96cf9d80 100644
--- a/packages/react-table/src/util.ts
+++ b/packages/react-table/src/util.ts
@@ -1,4 +1,5 @@
-import { TableColumns } from './';
+import { TableColumns, LocationWidth } from './';
+import React from 'react';
/**
* Get colspan number
@@ -127,3 +128,13 @@ export function getAllColumnsKeys(data: TableColumns[], keys: TableColumns
}
return keys;
}
+
+export function locationFixed(
+ fixed: boolean | 'left' | 'right',
+ location: { [key: number]: LocationWidth },
+ index: number,
+): React.CSSProperties {
+ if (!fixed) return {};
+ if (fixed === 'right') return { right: location[index]?.right };
+ return { left: location[index]?.left };
+}
From a86201ea64ebfc9fd165b173fe0bc7c57c589337 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Mon, 21 Mar 2022 19:54:35 +0800
Subject: [PATCH 05/12] =?UTF-8?q?feat(Table):=20Table=20=E6=96=B0=E5=A2=9E?=
=?UTF-8?q?=E5=9B=BA=E5=AE=9A=E5=88=97=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/src/ThComponent.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-table/src/ThComponent.tsx b/packages/react-table/src/ThComponent.tsx
index 75bcf81a6f..5711369687 100644
--- a/packages/react-table/src/ThComponent.tsx
+++ b/packages/react-table/src/ThComponent.tsx
@@ -16,7 +16,7 @@ interface ThComponentProps {
export default class ThComponent extends Component> {
componentDidMount() {
const rect = ReactDOM.findDOMNode(this);
- this.props.updateLocation({ width: (rect as any).getBoundingClientRect().width }, this.props.colNum);
+ this.props.updateLocation({ width: (rect as Element).getBoundingClientRect().width }, this.props.colNum);
}
render() {
From 35816f77babcafb01a3030fff02f49bc90b53aa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Mon, 21 Mar 2022 20:43:33 +0800
Subject: [PATCH 06/12] doc(Table): Update README.md
---
packages/react-table/README.md | 22 +++++++++++-----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
index fa8a7d876a..0fc5d69ad8 100644
--- a/packages/react-table/README.md
+++ b/packages/react-table/README.md
@@ -954,17 +954,17 @@ ReactDOM.render(, _mount_);
列描述数据对象,是 columns 中的一项,
-| 参数 | 说明 | 类型 | 默认值 |
-|--------- |-------- |--------- |-------- |
-| title | 列头显示文字。| ReactNode | - |
-| key | 需要的 key,可以忽略这个属性,如果标题带有 `render` 函数,那么这个 `key` 为必须非常重要。| String | - |
-| width | 列宽度。| Number | - |
-| colSpan | 合并表头行。| Number | - |
-| ellipsis | 超过宽度将自动省略。`v4.8.7+`| Boolean | `false` |
-| render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前值的 `key`,行索引数据,当前行号,当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - |
-| align | 设置列的对齐方式 | "left"\|"center"\|"right" | - |
-| className | 列样式类名 | String | - |
-| fixed | 把选择框列固定 | Boolean \|"left"\|"right" | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------- |-------- |--------- |-------- |-------- |
+| title | 列头显示文字。| ReactNode | - | - |
+| key | 需要的 key,可以忽略这个属性,如果标题带有 `render` 函数,那么这个 `key` 为必须非常重要。| String | - | - |
+| width | 列宽度。| Number | - | - |
+| colSpan | 合并表头行。| Number | - | - |
+| ellipsis | 超过宽度将自动省略。`v4.8.7+`| Boolean | `false` | - |
+| render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前值的 `key`,行索引数据,当前行号,当前列号。| `Function(text, key, rowData, rowNumber, columnNumber)` | - | - |
+| align | 设置列的对齐方式 | "left"\|"center"\|"right" | - | - |
+| className | 列样式类名 | String | - | - |
+| fixed | 把选择框列固定 | Boolean \|"left"\|"right" | - | 4.15.1 |
### expandable
From 68f82624299c27bfa142d9724b50bf5c2281b657 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Tue, 22 Mar 2022 16:30:34 +0800
Subject: [PATCH 07/12] =?UTF-8?q?update(Table):=20Table=20=E6=94=AF?=
=?UTF-8?q?=E6=8C=81=E6=A0=91=E5=BD=A2=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA?=
=?UTF-8?q?=E5=92=8C=E5=8F=AF=E5=B1=95=E5=BC=80=E5=90=8C=E6=97=B6=E5=87=BA?=
=?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/README.md | 8 +++-----
packages/react-table/src/TableTr.tsx | 6 ++++--
packages/react-table/src/index.tsx | 13 ++++++++++++-
3 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
index 0fc5d69ad8..de95f97d6c 100644
--- a/packages/react-table/README.md
+++ b/packages/react-table/README.md
@@ -729,9 +729,6 @@ ReactDOM.render(, _mount_);
可以通过设置 indentSize 以控制每一层的缩进宽度
-> ⚠️ 注意: 树形数据展示和`expandable.expandedRowRender`请不要同时出现,后续或将支持
-
-
```jsx
import ReactDOM from 'react-dom';
@@ -805,7 +802,7 @@ const Demo = () => {
)
@@ -968,7 +965,8 @@ ReactDOM.render(, _mount_);
### expandable
-注意 expandedRowKeys 与 onExpandedRowsChange 必须成对出现
+> ⚠️ 注意: expandedRowKeys 与 onExpandedRowsChange 必须同时出现或不出现
+
| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx
index ce05e5c540..2f1d2d7cff 100644
--- a/packages/react-table/src/TableTr.tsx
+++ b/packages/react-table/src/TableTr.tsx
@@ -38,9 +38,11 @@ export default function TableTr(props: TableTr
locationWidth,
} = props;
const [isOpacity, setIsOpacity] = useState(false);
+ const [childrenIndex, setChildrenIndex] = useState(0);
const [expandIndex, setExpandIndex] = useState>([]);
useEffect(() => {
setIsOpacity(!!data?.find((it) => it[childrenColumnName]));
+ setChildrenIndex(keys?.findIndex((it) => it.key === 'uiw-expanded') === -1 ? 0 : 1);
}, [data]);
const IconDom = useMemo(() => {
@@ -92,7 +94,7 @@ export default function TableTr(props: TableTr
}
}
const isHasChildren = Array.isArray(trData[childrenColumnName]);
- if (colNum === 0 && (isOpacity || hierarchy || isHasChildren)) {
+ if (colNum === childrenIndex && (isOpacity || hierarchy || isHasChildren)) {
objs.children = (
<>
{IconDom(key, isHasChildren)}
@@ -126,10 +128,10 @@ export default function TableTr(props: TableTr
);
})}
+ {isExpandedDom(trData, rowNum)}
{expandIndex.includes(key) && (
)}
- {isExpandedDom(trData, rowNum)}
);
})}
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 445e4492ce..1a2fc640bc 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -131,9 +131,20 @@ export default function Table(props: TablePro
return finalLocationWidth.current;
};
useEffect(() => {
+ const childKey = expandable?.childrenColumnName || 'children';
+ const deep = (params: TableColumns) => {
+ const arr1: Array = [];
+ const arr = params.map((it: T, index: number) => {
+ if (Array.isArray(it[childKey])) {
+ arr1.push(...deep(it[childKey]));
+ }
+ return rowKey ? it[rowKey] : index;
+ });
+ return [...arr1, ...arr];
+ };
if (expandable) {
if (expandable.defaultExpandAllRows) {
- setExpandIndex(data.map((it, index) => (rowKey ? it[rowKey] : index)));
+ setExpandIndex(deep(data));
return;
}
if (expandable.defaultExpandedRowKeys) {
From fab96bdd49c5cb923ce3bf85a2226113e5c21e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Wed, 23 Mar 2022 15:55:25 +0800
Subject: [PATCH 08/12] =?UTF-8?q?fix(Table):=20=E4=BF=AE=E5=A4=8DTable=20i?=
=?UTF-8?q?ndentSize=20=E4=BC=A0=E9=80=920=E5=A4=B1=E6=95=88=E9=97=AE?=
=?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/src/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 1a2fc640bc..d6e1a2e8ac 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -284,7 +284,7 @@ export default function Table(props: TablePro
onCell={onCell}
hierarchy={0}
isExpandedDom={isExpandedDom}
- indentSize={expandable?.indentSize || 16}
+ indentSize={typeof expandable?.indentSize === 'number' ? expandable?.indentSize : 16}
childrenColumnName={expandable?.childrenColumnName || 'children'}
/>
From 5a5bbdd8977d4ee2fc5ac12fce502d00ac3d4e2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Fri, 25 Mar 2022 15:31:42 +0800
Subject: [PATCH 09/12] =?UTF-8?q?fix(Table):=20=E4=BF=AE=E5=A4=8D=20table?=
=?UTF-8?q?=20fixed=20=E4=B8=8D=E8=83=BD=E5=AF=B9=E8=A1=A8=E5=A4=B4?=
=?UTF-8?q?=E5=88=86=E7=BB=84=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/src/TableTr.tsx | 20 ++++++-
packages/react-table/src/ThComponent.tsx | 15 +++--
packages/react-table/src/Thead.tsx | 4 +-
packages/react-table/src/index.tsx | 73 ++++++++++++++++++------
packages/react-table/src/util.ts | 4 +-
5 files changed, 87 insertions(+), 29 deletions(-)
diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx
index 2f1d2d7cff..fcfceb5515 100644
--- a/packages/react-table/src/TableTr.tsx
+++ b/packages/react-table/src/TableTr.tsx
@@ -1,12 +1,13 @@
import React, { useMemo, useState, useEffect } from 'react';
import Icon from '@uiw/react-icon';
-import { LocationWidth, TableProps } from './';
+import { LocationWidth, TableColumns, TableProps } from './';
import './style/index.less';
import { noop } from '@uiw/utils';
import { locationFixed } from './util';
interface TableTrProps {
rowKey?: keyof T;
+ header: TableColumns[][];
data: T[];
keys: TableProps['columns'];
render: { [key: string]: any };
@@ -19,7 +20,7 @@ interface TableTrProps {
// 层级
hierarchy: number;
childrenColumnName: string;
- locationWidth: { [key: number]: LocationWidth };
+ locationWidth: { [key: string]: LocationWidth };
}
export default function TableTr(props: TableTrProps) {
@@ -36,6 +37,7 @@ export default function TableTr(props: TableTr
indentSize,
childrenColumnName,
locationWidth,
+ header,
} = props;
const [isOpacity, setIsOpacity] = useState(false);
const [childrenIndex, setChildrenIndex] = useState(0);
@@ -65,6 +67,14 @@ export default function TableTr(props: TableTr
);
};
}, [expandIndex]);
+ const getIndex = (key: string) => {
+ let j = 0;
+ const i = header.findIndex((it) => {
+ j = it.findIndex((item) => item.key === key);
+ return j > -1;
+ });
+ return `${i}${j}`;
+ };
if (!Array.isArray(data) || !data.length) {
return null;
}
@@ -113,7 +123,11 @@ export default function TableTr(props: TableTr
return (
{objs.children}
diff --git a/packages/react-table/src/ThComponent.tsx b/packages/react-table/src/ThComponent.tsx
index 5711369687..83d7c2667c 100644
--- a/packages/react-table/src/ThComponent.tsx
+++ b/packages/react-table/src/ThComponent.tsx
@@ -10,13 +10,18 @@ interface ThComponentProps {
titleNode: JSX.Element;
onCellHead: TableProps['onCellHead'];
rowNum: number;
- locationWidth: { [key: number]: LocationWidth };
- updateLocation: (params: LocationWidth, index: number) => void;
+ locationWidth: { [key: string]: LocationWidth };
+ updateLocation: (params: LocationWidth, index: string, key: string, colSpan?: number) => void;
}
export default class ThComponent extends Component> {
componentDidMount() {
- const rect = ReactDOM.findDOMNode(this);
- this.props.updateLocation({ width: (rect as Element).getBoundingClientRect().width }, this.props.colNum);
+ const rect = ReactDOM.findDOMNode(this) as Element;
+ this.props.updateLocation(
+ { width: rect.getBoundingClientRect().width },
+ `${this.props.rowNum}${this.props.colNum}`,
+ this.props.item.key!,
+ this.props.item.colSpan,
+ );
}
render() {
@@ -34,7 +39,7 @@ export default class ThComponent extends Component> {
onCellHead?.(item, colNum, rowNum!, evn)}
>
diff --git a/packages/react-table/src/Thead.tsx b/packages/react-table/src/Thead.tsx
index 5cffc332c0..d4c600e4cd 100644
--- a/packages/react-table/src/Thead.tsx
+++ b/packages/react-table/src/Thead.tsx
@@ -9,8 +9,8 @@ export interface TheadProps extends IPr
onCellHead?: TableProps['onCellHead'];
align?: TableColumns['align'];
className?: TableColumns['className'];
- locationWidth?: { [key: number]: LocationWidth };
- updateLocation?: (params: LocationWidth, index: number) => void;
+ locationWidth?: { [key: string]: LocationWidth };
+ updateLocation?: (params: LocationWidth, index: string, key: string, colSpan?: number) => void;
}
export default function TheadComponent(
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index d6e1a2e8ac..81023bc333 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -74,12 +74,15 @@ export interface LocationWidth {
left?: number;
right?: number;
width: number;
+ key?: string;
+ colSpan?: number;
}
export interface ICellOptions {
rowNum: number;
colNum: number;
keyName: string;
}
+
export default function Table(props: TableProps = {}) {
const {
prefixCls = 'w-table',
@@ -99,35 +102,70 @@ export default function Table(props: TablePro
...other
} = props;
const [expandIndex, setExpandIndex] = useState>([]);
- const [locationWidth, setLocationWidth] = useState<{ [key: number]: LocationWidth }>({});
- const finalLocationWidth = useRef<{ [key: number]: LocationWidth }>({});
- const updateLocation = (params: LocationWidth, index: number) => {
+ const [locationWidth, setLocationWidth] = useState<{ [key: string]: LocationWidth }>({});
+ const finalLocationWidth = useRef<{ [key: string]: LocationWidth }>({});
+ const updateLocation = (params: LocationWidth, index: string, key: string, colSpan: number = 0) => {
finalLocationWidth.current = {
...finalLocationWidth.current,
[index]: {
...finalLocationWidth.current[index],
...params,
+ key: key,
+ colSpan,
},
};
- if (index === columns.length - 1) {
+ if (index === `${header.length - 1}${header[header.length - 1].length - 1}`) {
setLocationWidth(computed());
}
};
- const computed = () => {
- let left = 0,
- right = 0;
- for (let index = 0; index < columns.length; index++) {
- if (finalLocationWidth.current[index]) {
- finalLocationWidth.current[index].left = left;
- left = finalLocationWidth.current[index].width + left;
+ const deepClumnsLocation = (
+ params: Array | number>,
+ fistIndex: number,
+ leftOrRight: 'left' | 'right',
+ isReverse: boolean,
+ ) => {
+ let initialValue = 0,
+ lastIndex = isReverse ? 0 : params.length - 1,
+ deepParams: Array | number> = [];
+ params.forEach(() => {
+ let abs = Math.abs(lastIndex);
+ const i = `${fistIndex}${abs}`;
+ if (isReverse) {
+ lastIndex += 1;
+ } else {
+ lastIndex -= 1;
}
- }
- for (let index = columns.length - 1; index > -1; index--) {
- if (finalLocationWidth.current[index]) {
- finalLocationWidth.current[index].right = right;
- right = finalLocationWidth.current[index].width + right;
+ if (typeof params[abs] === 'number') {
+ initialValue = (params[abs] as number) + initialValue;
+ deepParams.push(params[abs]);
+ return;
}
- }
+ if (finalLocationWidth.current[i]) {
+ finalLocationWidth.current[i][leftOrRight] = initialValue;
+ initialValue = finalLocationWidth.current[i].width + initialValue;
+ }
+ if (Array.isArray((params[abs] as TableColumns).children)) {
+ deepParams.push(...(params[abs] as TableColumns).children!);
+ return;
+ }
+ if (finalLocationWidth.current[i]) {
+ deepParams.push(finalLocationWidth.current[i].width);
+ } else {
+ const parent = header.find((it) => it.find((it) => it.key === (params[abs] as TableColumns).key)) || [];
+ const sub = parent.findIndex((it) => it.key === (params[abs] as TableColumns).key);
+ if (finalLocationWidth.current[`${i[0]}${sub}`]) {
+ // 合并单元格
+ deepParams.push(finalLocationWidth.current[`${i[0]}${sub}`].width);
+ }
+ }
+ });
+ if (deepParams.filter((it) => typeof it !== 'number').length)
+ deepClumnsLocation(deepParams, fistIndex + 1, leftOrRight, isReverse);
+ };
+
+ const computed = () => {
+ deepClumnsLocation(columns, 0, 'left', true);
+ deepClumnsLocation(columns, 0, 'right', false);
return finalLocationWidth.current;
};
useEffect(() => {
@@ -277,6 +315,7 @@ export default function Table(props: TablePro
rowKey={rowKey}
locationWidth={locationWidth}
data={data}
+ header={header}
keys={self.keys}
render={render}
ellipsis={ellipsis}
diff --git a/packages/react-table/src/util.ts b/packages/react-table/src/util.ts
index 5f96cf9d80..c66f8f015e 100644
--- a/packages/react-table/src/util.ts
+++ b/packages/react-table/src/util.ts
@@ -131,8 +131,8 @@ export function getAllColumnsKeys(data: TableColumns[], keys: TableColumns
export function locationFixed(
fixed: boolean | 'left' | 'right',
- location: { [key: number]: LocationWidth },
- index: number,
+ location: { [key: string]: LocationWidth },
+ index: string,
): React.CSSProperties {
if (!fixed) return {};
if (fixed === 'right') return { right: location[index]?.right };
From 2c9f85f4c7607f92f7892bfb0538c373f3742319 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Wed, 30 Mar 2022 16:19:22 +0800
Subject: [PATCH 10/12] =?UTF-8?q?fix(Table):=20=E4=BF=AE=E5=A4=8Dtable=20f?=
=?UTF-8?q?ix=20=E5=9C=A8=E8=A1=A8=E5=A4=B4=E5=88=86=E7=BB=84=E4=B8=ADfixe?=
=?UTF-8?q?d=E5=9B=BA=E5=AE=9A=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/README.md | 14 +++---
packages/react-table/src/TableTr.tsx | 15 ++++---
packages/react-table/src/index.tsx | 65 +++++++++++++---------------
3 files changed, 48 insertions(+), 46 deletions(-)
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
index de95f97d6c..d60b6be4d7 100644
--- a/packages/react-table/README.md
+++ b/packages/react-table/README.md
@@ -80,6 +80,11 @@ const columns = [
style: { color: 'red' },
key: 'name',
children: [
+ {
+ title: '英文名字',
+ width: 100,
+ key: 'name_en',
+ },
{
title: '中文名字',
key: 'cnname',
@@ -90,7 +95,7 @@ const columns = [
key: 'firstname',
children:[
{ title: '姓', key: 'name1', width: 80 },
- { title: '名', key: 'name2', width: 80 },
+ { title: '名', key: 'name2', width: 80 },
]
}, {
title: '拼音',
@@ -101,14 +106,11 @@ const columns = [
],
},
],
- }, {
- title: '英文名字',
- width: 100,
- key: 'name_en',
- },
+ },
]
}, {
title: '其它',
+ key: 'other',
children:[
{ title: '生日', key: 'birthday', width: 150 },
{ title: '职业', key: 'job', width: 150 },
diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx
index fcfceb5515..e9da4362d4 100644
--- a/packages/react-table/src/TableTr.tsx
+++ b/packages/react-table/src/TableTr.tsx
@@ -115,9 +115,9 @@ export default function TableTr(props: TableTr
}
if (keyName.fixed) {
if (keyName.fixed === 'right') {
- objs.className = `${objs.className} ${prefixCls}-fixed-right`;
+ objs.className = `${prefixCls}-fixed-right`;
} else {
- objs.className = `${objs.className} ${prefixCls}-fixed-true`;
+ objs.className = `${prefixCls}-fixed-true`;
}
}
return (
@@ -134,9 +134,14 @@ export default function TableTr(props: TableTr
}
key={colNum}
- className={`${prefixCls}-tr-children-${keyName.align || 'left'} ${keyName.className || ''} ${
- objs.className || ''
- }`}
+ className={[
+ prefixCls + '-tr-children-' + (keyName.align || 'left'),
+ keyName.className,
+ objs.className,
+ ]
+ .filter((it) => it)
+ .join(' ')
+ .trim()}
onClick={(evn) => onCell(trData, { rowNum, colNum, keyName: keyName.key! }, evn)}
/>
);
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 81023bc333..dadee6fe4f 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -118,54 +118,47 @@ export default function Table(props: TablePro
setLocationWidth(computed());
}
};
- const deepClumnsLocation = (
- params: Array | number>,
- fistIndex: number,
- leftOrRight: 'left' | 'right',
- isReverse: boolean,
- ) => {
+ const deepClumnsLocation = (params: Array | number>, fistIndex: number) => {
let initialValue = 0,
- lastIndex = isReverse ? 0 : params.length - 1,
+ headerIndex = 0,
deepParams: Array | number> = [];
- params.forEach(() => {
- let abs = Math.abs(lastIndex);
- const i = `${fistIndex}${abs}`;
- if (isReverse) {
- lastIndex += 1;
- } else {
- lastIndex -= 1;
- }
- if (typeof params[abs] === 'number') {
- initialValue = (params[abs] as number) + initialValue;
- deepParams.push(params[abs]);
+ params.forEach((_, index) => {
+ const i = `${fistIndex}${headerIndex}`;
+ if (typeof params[index] === 'number') {
+ initialValue = (params[index] as number) + initialValue;
+ deepParams.push(params[index]);
return;
}
if (finalLocationWidth.current[i]) {
- finalLocationWidth.current[i][leftOrRight] = initialValue;
+ finalLocationWidth.current[i].left = initialValue;
initialValue = finalLocationWidth.current[i].width + initialValue;
+ if (Array.isArray((params[index] as TableColumns).children)) {
+ deepParams.push(...(params[index] as TableColumns).children!);
+ } else {
+ deepParams.push(finalLocationWidth.current[i].width);
+ }
}
- if (Array.isArray((params[abs] as TableColumns).children)) {
- deepParams.push(...(params[abs] as TableColumns).children!);
- return;
+ headerIndex += 1;
+ });
+ (initialValue = 0), (headerIndex = header[fistIndex].length - 1);
+ for (let index = params.length - 1; index >= 0; index--) {
+ const i = `${fistIndex}${headerIndex}`;
+ if (typeof params[index] === 'number') {
+ initialValue = (params[index] as number) + initialValue;
+ continue;
}
if (finalLocationWidth.current[i]) {
- deepParams.push(finalLocationWidth.current[i].width);
- } else {
- const parent = header.find((it) => it.find((it) => it.key === (params[abs] as TableColumns).key)) || [];
- const sub = parent.findIndex((it) => it.key === (params[abs] as TableColumns).key);
- if (finalLocationWidth.current[`${i[0]}${sub}`]) {
- // 合并单元格
- deepParams.push(finalLocationWidth.current[`${i[0]}${sub}`].width);
- }
+ finalLocationWidth.current[i].right = initialValue;
+ initialValue = finalLocationWidth.current[i].width + initialValue;
}
- });
- if (deepParams.filter((it) => typeof it !== 'number').length)
- deepClumnsLocation(deepParams, fistIndex + 1, leftOrRight, isReverse);
+ headerIndex -= 1;
+ }
+ if (deepParams.filter((it) => typeof it !== 'number').length) deepClumnsLocation(deepParams, fistIndex + 1);
};
const computed = () => {
- deepClumnsLocation(columns, 0, 'left', true);
- deepClumnsLocation(columns, 0, 'right', false);
+ deepClumnsLocation(columns, 0);
+ // deepClumnsLocation(columns, 0, 'right', false);
return finalLocationWidth.current;
};
useEffect(() => {
@@ -296,6 +289,8 @@ export default function Table(props: TablePro
}, [scroll]);
const cls = [prefixCls, className, bordered ? `${prefixCls}-bordered` : null].filter(Boolean).join(' ').trim();
const { header, render, ellipsis } = getLevelItems(self.selfColumns);
+ console.log('header: ', header);
+
return (
From f7d88312b0a48e7be0b6c1e5daf1c25e812af199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Wed, 30 Mar 2022 16:22:33 +0800
Subject: [PATCH 11/12] =?UTF-8?q?fix(Table):=20=E4=BF=AE=E5=A4=8Dtable=20f?=
=?UTF-8?q?ix=20=E5=9C=A8=E8=A1=A8=E5=A4=B4=E5=88=86=E7=BB=84=E4=B8=ADfixe?=
=?UTF-8?q?d=E5=9B=BA=E5=AE=9A=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/src/index.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index dadee6fe4f..5cf848c83d 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -158,7 +158,6 @@ export default function Table(props: TablePro
const computed = () => {
deepClumnsLocation(columns, 0);
- // deepClumnsLocation(columns, 0, 'right', false);
return finalLocationWidth.current;
};
useEffect(() => {
From 64da40dbb774952d9a3b108e27f24f70fbc8e764 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B0=E9=91=AB?= <1192065030@qq.com>
Date: Wed, 30 Mar 2022 16:24:02 +0800
Subject: [PATCH 12/12] =?UTF-8?q?fix(Table):=20=E4=BF=AE=E5=A4=8Dtable=20f?=
=?UTF-8?q?ix=20=E5=9C=A8=E8=A1=A8=E5=A4=B4=E5=88=86=E7=BB=84=E4=B8=ADfixe?=
=?UTF-8?q?d=E5=9B=BA=E5=AE=9A=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/react-table/src/index.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx
index 5cf848c83d..51ccb40cce 100644
--- a/packages/react-table/src/index.tsx
+++ b/packages/react-table/src/index.tsx
@@ -288,7 +288,6 @@ export default function Table(props: TablePro
}, [scroll]);
const cls = [prefixCls, className, bordered ? `${prefixCls}-bordered` : null].filter(Boolean).join(' ').trim();
const { header, render, ellipsis } = getLevelItems(self.selfColumns);
- console.log('header: ', header);
return (
| | |