Skip to content

Commit 19c4d96

Browse files
zombieJzombieJ
committed
chore: add empty style
1 parent 16ce02b commit 19c4d96

File tree

5 files changed

+63
-45
lines changed

5 files changed

+63
-45
lines changed

‎docs/examples/virtual.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,8 @@ const Demo = () => {
199199
columns={columns}
200200
// expandedRowRender={({ b, c }) => b || c}
201201
scroll={{ x: 1200, y: scrollY ? 200 : null }}
202-
// data={data}
203-
data={[]}
202+
data={data}
203+
// data={[]}
204204
rowKey="indexKey"
205205
expandable={{
206206
expandedRowRender: () => 2333,

‎src/Body/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,14 @@ import MeasureRow from './MeasureRow';
1313
export interface BodyProps<RecordType> {
1414
data: readonly RecordType[];
1515
measureColumnWidth: boolean;
16-
emptyNode: React.ReactNode;
1716
}
1817

1918
function Body<RecordType>(props: BodyProps<RecordType>) {
2019
if (process.env.NODE_ENV !== 'production') {
2120
devRenderTimes(props);
2221
}
2322

24-
const { data, measureColumnWidth, emptyNode } = props;
23+
const { data, measureColumnWidth } = props;
2524

2625
const {
2726
prefixCls,
@@ -31,6 +30,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
3130
getRowKey,
3231
expandedKeys,
3332
childrenColumnName,
33+
emptyNode,
3434
} = useContext(TableContext, [
3535
'prefixCls',
3636
'getComponent',
@@ -39,6 +39,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
3939
'getRowKey',
4040
'expandedKeys',
4141
'childrenColumnName',
42+
'emptyNode',
4243
]);
4344

4445
const flattenData: { record: RecordType; indent: number; index: number }[] =

‎src/Table.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -536,11 +536,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
536536

537537
// Body
538538
const bodyTable = (
539-
<Body
540-
data={mergedData}
541-
measureColumnWidth={fixHeader || horizonScroll || isSticky}
542-
emptyNode={emptyNode}
543-
/>
539+
<Body data={mergedData} measureColumnWidth={fixHeader || horizonScroll || isSticky} />
544540
);
545541

546542
const bodyColGroup = (
@@ -760,6 +756,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
760756
expandIconColumnIndex: expandableConfig.expandIconColumnIndex,
761757
indentSize: expandableConfig.indentSize,
762758
allColumnsFixedLeft: flattenColumns.every(col => col.fixed === 'left'),
759+
emptyNode,
763760

764761
// Column
765762
columns,
@@ -803,6 +800,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
803800
onTriggerExpand,
804801
expandableConfig.expandIconColumnIndex,
805802
expandableConfig.indentSize,
803+
emptyNode,
806804

807805
// Column
808806
columns,

‎src/VirtualTable/BodyGrid.tsx‎

Lines changed: 54 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import useFlattenRecords, { type FlattenData } from '../hooks/useFlattenRecords'
77
import type { ColumnType, OnCustomizeScroll } from '../interface';
88
import BodyLine from './BodyLine';
99
import { GridContext, StaticContext } from './context';
10+
import Cell from '../Cell';
1011

1112
export interface GridProps<RecordType = any> {
1213
data: RecordType[];
@@ -20,15 +21,23 @@ export interface GridRef {
2021
const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
2122
const { data, onScroll } = props;
2223

23-
const { flattenColumns, onColumnResize, getRowKey, expandedKeys, prefixCls, childrenColumnName } =
24-
useContext(TableContext, [
25-
'flattenColumns',
26-
'onColumnResize',
27-
'getRowKey',
28-
'prefixCls',
29-
'expandedKeys',
30-
'childrenColumnName',
31-
]);
24+
const {
25+
flattenColumns,
26+
onColumnResize,
27+
getRowKey,
28+
expandedKeys,
29+
prefixCls,
30+
childrenColumnName,
31+
emptyNode,
32+
} = useContext(TableContext, [
33+
'flattenColumns',
34+
'onColumnResize',
35+
'getRowKey',
36+
'prefixCls',
37+
'expandedKeys',
38+
'childrenColumnName',
39+
'emptyNode',
40+
]);
3241
const { scrollY, scrollX, listItemHeight } = useContext(StaticContext);
3342

3443
// =========================== Ref ============================
@@ -62,10 +71,10 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
6271
const obj = {} as GridRef;
6372

6473
Object.defineProperty(obj, 'scrollLeft', {
65-
get: () => listRef.current.getScrollInfo().x,
74+
get: () => listRef.current?.getScrollInfo().x || 0,
6675

6776
set: (value: number) => {
68-
listRef.current.scrollTo({
77+
listRef.current?.scrollTo({
6978
left: value,
7079
});
7180
},
@@ -180,32 +189,41 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
180189
// ========================== Render ==========================
181190
const tblPrefixCls = `${prefixCls}-tbody`;
182191

183-
return (
184-
<GridContext.Provider value={gridContext}>
185-
<div>
186-
<VirtualList<FlattenData<any>>
187-
ref={listRef}
188-
className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
189-
height={scrollY}
190-
itemHeight={listItemHeight || 24}
191-
data={flattenData}
192-
itemKey={item => getRowKey(item.record)}
193-
scrollWidth={scrollX}
194-
onVirtualScroll={({ x }) => {
195-
onScroll({
196-
scrollLeft: x,
197-
});
198-
}}
199-
extraRender={extraRender}
200-
>
201-
{(item, index, itemProps) => {
202-
const rowKey = getRowKey(item.record, index);
203-
return <BodyLine data={item} rowKey={rowKey} index={index} {...itemProps} />;
204-
}}
205-
</VirtualList>
192+
let bodyContent: React.ReactNode;
193+
if (flattenData.length) {
194+
bodyContent = (
195+
<VirtualList<FlattenData<any>>
196+
ref={listRef}
197+
className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
198+
height={scrollY}
199+
itemHeight={listItemHeight || 24}
200+
data={flattenData}
201+
itemKey={item => getRowKey(item.record)}
202+
scrollWidth={scrollX}
203+
onVirtualScroll={({ x }) => {
204+
onScroll({
205+
scrollLeft: x,
206+
});
207+
}}
208+
extraRender={extraRender}
209+
>
210+
{(item, index, itemProps) => {
211+
const rowKey = getRowKey(item.record, index);
212+
return <BodyLine data={item} rowKey={rowKey} index={index} {...itemProps} />;
213+
}}
214+
</VirtualList>
215+
);
216+
} else {
217+
bodyContent = (
218+
<div className={classNames(`${prefixCls}-placeholder`)}>
219+
<Cell component="div" prefixCls={prefixCls}>
220+
{emptyNode}
221+
</Cell>
206222
</div>
207-
</GridContext.Provider>
208-
);
223+
);
224+
}
225+
226+
return <GridContext.Provider value={gridContext}>{bodyContent}</GridContext.Provider>;
209227
});
210228

211229
const ResponseGrid = responseImmutable(Grid);

‎src/context/TableContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export interface TableContextProps<RecordType = any> {
3636
rowClassName: string | RowClassName<RecordType>;
3737
expandedRowClassName: RowClassName<RecordType>;
3838
onRow?: GetComponentProps<RecordType>;
39+
emptyNode?: React.ReactNode;
3940

4041
tableLayout: TableLayout;
4142

0 commit comments

Comments
 (0)