Skip to content

Commit e147b8c

Browse files
helloqian12138helloqian12138
committed
feat: table support pagination sticky style
1 parent 24eb72e commit e147b8c

File tree

8 files changed

+81
-43
lines changed

8 files changed

+81
-43
lines changed

‎docs/demo-data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export const initSchema: DripTableSchema<CustomColumnSchema, SubtableDataSourceK
6363
],
6464
},
6565
pagination: {
66+
sticky: true,
6667
border: true,
6768
simple: false,
6869
pageSize: 20,

‎docs/drip-table/demo/demo.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import DripTable, { DripTableFilters, DripTableInstance } from 'drip-table';
1212
import { JsonEditor } from 'jsoneditor-react';
1313
import React from 'react';
1414

15-
import { initSchema, mockData, SampleRecordType, SubtableDataSourceKey } from '../../demo-data';
15+
import { initSchema, mockData, SampleRecordType } from '../../demo-data';
1616
import { CustomColumnSchema, CustomComponentEvent, CustomComponents } from './custom-components';
1717

1818
import styles from './demo.module.less';
@@ -110,7 +110,6 @@ function Demo() {
110110
CustomColumnSchema: CustomColumnSchema;
111111
CustomComponentEvent: CustomComponentEvent;
112112
CustomComponentExtraData: never;
113-
SubtableDataSourceKey: SubtableDataSourceKey;
114113
}>
115114
ref={dripTable}
116115
schema={schema}

‎packages/drip-table/src/components/react-components/spin/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export interface SpinProps {
1515
children?: React.ReactNode;
1616
spinning?: boolean;
1717
tip?: string;
18+
className?: string;
19+
innerClassName?: string;
1820
}
1921

2022
const prefixCls = 'jfe-drip-table-rc-spin';
@@ -35,9 +37,9 @@ function Indicator() {
3537
}
3638

3739
const Spin = React.memo(({ ...props }: SpinProps) => (
38-
<div className={`${prefixCls}-nested-loading`}>
40+
<div className={classNames(`${prefixCls}-nested-loading`, props.className)}>
3941
{ props.spinning && <Indicator /> }
40-
<div className={classNames(`${prefixCls}-container`, { [`${prefixCls}-blur`]: props.spinning })}>
42+
<div className={classNames(`${prefixCls}-container`, props.innerClassName, { [`${prefixCls}-blur`]: props.spinning })}>
4143
{ props.tip }
4244
{ props.children }
4345
</div>

‎packages/drip-table/src/layouts/index.less‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import url("@@drip-table-src/styles/theme/default.less");
2+
3+
@prefixCls: jfe-drip-table-layout-table;
4+
5+
.@{prefixCls}-sticky-container {
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: space-between;
9+
flex: 1;
10+
}

‎packages/drip-table/src/layouts/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
77
*/
88

9+
import './index.less';
10+
911
import classnames from 'classnames';
1012
import React, { useEffect } from 'react';
1113

@@ -136,9 +138,11 @@ function DripTableLayout<
136138

137139
return (
138140
<ErrorBoundary>
139-
<Spin spinning={tableProps.loading}>
141+
<Spin spinning={tableProps.loading} className={tableProps.spinClassName} innerClassName={tableProps.spinInnerClassName}>
140142
<div
141-
className={classnames(tableProps.className, tableProps.schema.className)}
143+
className={classnames(tableProps.className, tableProps.schema.className, {
144+
'jfe-drip-table-layout-table-sticky-container': tableProps.schema.pagination && tableProps.schema.pagination.sticky,
145+
})}
142146
style={Object.assign({}, tableProps.style, tableProps.schema.style, themeStyle)}
143147
>
144148
{ layoutNode }

‎packages/drip-table/src/layouts/table/index.tsx‎

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -180,37 +180,37 @@ const hookColumRender = <
180180
<React.Fragment>
181181
{ render?.(d, row, index) }
182182
{
183-
columnSchema && ('sorter' in columnSchema || columnSchema.style || columnSchema.hoverStyle || columnSchema.rowHoverStyle || columnSchema.columnHoverStyle)
184-
? (
185-
<div
186-
style={{ display: 'none' }}
187-
ref={(el) => {
188-
const tdEl = el?.parentElement;
189-
if (tdEl) {
190-
const context = { props: { record: row.record, recordIndex: row.index, ext: extraProps.ext } };
191-
const parseStyleSchema = (style: string | Record<string, string> | undefined) => parseCSS(typeof style === 'string' ? safeExecute(style, context) : style);
192-
tdEl.dataset.tableUuid = tableInfo.uuid;
193-
tdEl.dataset.columnKey = columnSchema.key;
194-
tdEl.dataset.rowKey = row.key;
195-
tdEl.dataset.basicStyle = stringifyCSS(Object.assign(
196-
{
197-
'text-align': columnSchema.align,
198-
background: sorter?.key === columnSchema.key ? 'var(--drip-table-column-sorted-background-color, inherit)' : void 0,
199-
},
200-
parseStyleSchema(columnSchema.style),
201-
));
202-
tdEl.dataset.hoverStyle = stringifyCSS(parseStyleSchema(columnSchema.hoverStyle));
203-
tdEl.dataset.rowHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.rowHoverStyle));
204-
tdEl.dataset.columnHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.columnHoverStyle));
205-
tdEl.addEventListener('mouseenter', onCellMouseEnter);
206-
tdEl.addEventListener('mouseleave', onCellMouseLeave);
207-
updateCellElementStyle(tdEl, void 0, void 0);
208-
}
209-
}}
210-
/>
211-
)
212-
: null
213-
}
183+
columnSchema && ('sorter' in columnSchema || columnSchema.style || columnSchema.hoverStyle || columnSchema.rowHoverStyle || columnSchema.columnHoverStyle)
184+
? (
185+
<div
186+
style={{ display: 'none' }}
187+
ref={(el) => {
188+
const tdEl = el?.parentElement;
189+
if (tdEl) {
190+
const context = { props: { record: row.record, recordIndex: row.index, ext: extraProps.ext } };
191+
const parseStyleSchema = (style: string | Record<string, string> | undefined) => parseCSS(typeof style === 'string' ? safeExecute(style, context) : style);
192+
tdEl.dataset.tableUuid = tableInfo.uuid;
193+
tdEl.dataset.columnKey = columnSchema.key;
194+
tdEl.dataset.rowKey = row.key;
195+
tdEl.dataset.basicStyle = stringifyCSS(Object.assign(
196+
{
197+
'text-align': columnSchema.align,
198+
background: sorter?.key === columnSchema.key ? 'var(--drip-table-column-sorted-background-color, inherit)' : void 0,
199+
},
200+
parseStyleSchema(columnSchema.style),
201+
));
202+
tdEl.dataset.hoverStyle = stringifyCSS(parseStyleSchema(columnSchema.hoverStyle));
203+
tdEl.dataset.rowHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.rowHoverStyle));
204+
tdEl.dataset.columnHoverStyle = stringifyCSS(parseStyleSchema(columnSchema.columnHoverStyle));
205+
tdEl.addEventListener('mouseenter', onCellMouseEnter);
206+
tdEl.addEventListener('mouseleave', onCellMouseLeave);
207+
updateCellElementStyle(tdEl, void 0, void 0);
208+
}
209+
}}
210+
/>
211+
)
212+
: null
213+
}
214214
</React.Fragment>
215215
);
216216
};
@@ -1422,7 +1422,9 @@ function TableLayout<
14221422
</Slot>
14231423
)
14241424
: (
1425-
<span className={`${prefixCls}-row-slot__error`}>{ `自定义插槽组件渲染函数 tableProps.slots['${slotType}'] 不存在` }</span>
1425+
<span className={`${prefixCls}-row-slot__error`}>
1426+
{ `自定义插槽组件渲染函数 tableProps.slots['${slotType}'] 不存在` }
1427+
</span>
14261428
);
14271429
}
14281430
return render?.(o, row, index);
@@ -1772,8 +1774,8 @@ function TableLayout<
17721774
...subtable ? tableProps.subtableProps.filter(sp => sp.subtableID === subtable.id) || [] : [],
17731775
...tableProps.subtableProps.filter(
17741776
sp => sp.recordKeys
1775-
&& sp.recordKeys.length === 1
1776-
&& sp.recordKeys[0] === row.record[rowKey],
1777+
&& sp.recordKeys.length === 1
1778+
&& sp.recordKeys[0] === row.record[rowKey],
17771779
) || [],
17781780
].map(sp => sp.properties),
17791781
)
@@ -1901,9 +1903,8 @@ function TableLayout<
19011903
[tableProps.emptyText, tableProps.schema.emptyText],
19021904
);
19031905

1904-
return (
1906+
const renderTableLayout = (
19051907
<React.Fragment>
1906-
{ paginationPosition === 'top' ? renderPagination : void 0 }
19071908
{ props.header }
19081909
<ResizeObserver onResize={rcTableOnResize}>
19091910
<div className={`${prefixCls}-resize-observer`}>
@@ -1968,9 +1969,24 @@ function TableLayout<
19681969
</div>
19691970
</ResizeObserver>
19701971
{ props.footer }
1971-
{ paginationPosition === 'bottom' ? renderPagination : void 0 }
19721972
</React.Fragment>
19731973
);
1974+
1975+
return tableProps.schema.pagination && tableProps.schema.pagination?.sticky
1976+
? (
1977+
<React.Fragment>
1978+
{ paginationPosition === 'top' ? renderPagination : void 0 }
1979+
<div>{ renderTableLayout }</div>
1980+
{ paginationPosition === 'bottom' ? renderPagination : void 0 }
1981+
</React.Fragment>
1982+
)
1983+
: (
1984+
<React.Fragment>
1985+
{ paginationPosition === 'top' ? renderPagination : void 0 }
1986+
{ renderTableLayout }
1987+
{ paginationPosition === 'bottom' ? renderPagination : void 0 }
1988+
</React.Fragment>
1989+
);
19741990
}
19751991

19761992
export default TableLayout;

‎packages/drip-table/src/types/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,7 @@ export interface DripTableSchema<
256256
* 是否展示分页以及配置
257257
*/
258258
pagination?: false | {
259+
sticky?: boolean;
259260
border?: boolean;
260261
simple?: boolean;
261262
size?: 'small' | 'default';
@@ -561,6 +562,8 @@ export interface DripTableProps<
561562
* 自定义样式表
562563
*/
563564
style?: React.CSSProperties;
565+
spinClassName?: string;
566+
spinInnerClassName?: string;
564567
/**
565568
* 表单 Schema
566569
*/

‎packages/drip-table/src/utils/ajv.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,7 @@ const getDripTablePropsAjvSchema = (options?: AjvOptions) => {
275275
{
276276
type: 'object',
277277
properties: {
278+
sticky: { type: 'boolean' },
278279
border: { type: 'boolean' },
279280
simple: { type: 'boolean' },
280281
size: { enum: ['small', 'default'] },
@@ -435,6 +436,8 @@ const getDripTablePropsAjvSchema = (options?: AjvOptions) => {
435436
items: {},
436437
},
437438
className: { type: 'string' },
439+
spinClassName: { type: 'string' },
440+
spinInnerClassName: { type: 'string' },
438441
style: DRIP_TABLE_CSS_SCHEMA,
439442
selectedRowKeys: {},
440443
displayColumnKeys: {},

0 commit comments

Comments
 (0)