@are-visual/virtual-table 0.1.3 → 0.2.0
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.
- package/README.md +1 -0
- package/index.d.ts +7 -2
- package/index.esm.js +14 -15
- package/index.esm.js.map +1 -1
- package/middleware/selection/index.d.ts +2 -1
- package/middleware/selection/index.js +1 -1
- package/middleware/selection/index.js.map +1 -1
- package/middleware/summary/index.d.ts +20 -3
- package/middleware/summary/index.js +111 -38
- package/middleware/summary/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -111,6 +111,7 @@ function App() {
|
|
|
111
111
|
| overscanRows | 额外在首尾渲染数据条数 | number | 5 | |
|
|
112
112
|
| overscanColumns | 横向虚拟化时,在头和尾额外渲染多少列 | number | 3 | |
|
|
113
113
|
| stickyHeader | 表头吸顶<br />为 true 时 top 为 0,为 number 则是偏移量 | number \| boolean | | |
|
|
114
|
+
| defaultColumnWidth | 缺失宽度设置时的默认值(与虚拟化无关) | number | 100 | >=0.2 |
|
|
114
115
|
| pipeline | 插件实例 | TablePipeline | | |
|
|
115
116
|
| rowClassName | 表格行样式类名 | (*record*, *index*) => string | | |
|
|
116
117
|
| onRow | 设置行属性 | (*record*, *index*) => TdHTMLAttributes | | |
|
package/index.d.ts
CHANGED
|
@@ -12,9 +12,9 @@ type AnyObject = Record<string, any>;
|
|
|
12
12
|
type OnRowType<T = any> = (record: T, index: number) => Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, 'children' | 'ref'>;
|
|
13
13
|
|
|
14
14
|
type AlignType = 'left' | 'right' | 'center';
|
|
15
|
-
interface ColumnExtra {
|
|
15
|
+
interface ColumnExtra<T = any> {
|
|
16
16
|
}
|
|
17
|
-
interface ColumnTypeCommon<T> extends ColumnExtra {
|
|
17
|
+
interface ColumnTypeCommon<T> extends ColumnExtra<T> {
|
|
18
18
|
className?: string;
|
|
19
19
|
/** 表头列合并,设置为 0 时,不渲染 */
|
|
20
20
|
colSpan?: number;
|
|
@@ -301,6 +301,11 @@ interface VirtualTableCoreProps<T> extends NecessaryProps<T>, Pick<TableBodyProp
|
|
|
301
301
|
overscanColumns?: number;
|
|
302
302
|
/** 开启表头虚拟滚动 @default true */
|
|
303
303
|
virtualHeader?: boolean;
|
|
304
|
+
/**
|
|
305
|
+
* 缺失宽度设置时的默认值(与虚拟化无关)
|
|
306
|
+
* @default 100
|
|
307
|
+
*/
|
|
308
|
+
defaultColumnWidth?: number;
|
|
304
309
|
pipeline?: TablePipeline<T>;
|
|
305
310
|
getOffsetTop?: () => number;
|
|
306
311
|
}
|
package/index.esm.js
CHANGED
|
@@ -1341,6 +1341,7 @@ function findLastFixedLeftIndex(columns) {
|
|
|
1341
1341
|
}
|
|
1342
1342
|
function useColumnVirtualize(options) {
|
|
1343
1343
|
var estimateSize = options.estimateSize,
|
|
1344
|
+
defaultColumnWidth = options.defaultColumnWidth,
|
|
1344
1345
|
overscan = options.overscan,
|
|
1345
1346
|
rawColumns = options.columns,
|
|
1346
1347
|
bodyWrapper = options.bodyWrapper,
|
|
@@ -1461,8 +1462,14 @@ function useColumnVirtualize(options) {
|
|
|
1461
1462
|
});
|
|
1462
1463
|
}, [disabled, rawColumns, startIndex, endIndex, lastFixedLeftIndex, firstFixedRightIndex]);
|
|
1463
1464
|
var descriptor = useMemo(function () {
|
|
1464
|
-
return columnSlice.reduce(function (result,
|
|
1465
|
-
var key = getKey(
|
|
1465
|
+
return columnSlice.reduce(function (result, rawColumn, index) {
|
|
1466
|
+
var key = getKey(rawColumn);
|
|
1467
|
+
var column = rawColumn;
|
|
1468
|
+
if (column.width == null && column.minWidth == null) {
|
|
1469
|
+
column = _extends({}, column, {
|
|
1470
|
+
width: defaultColumnWidth
|
|
1471
|
+
});
|
|
1472
|
+
}
|
|
1466
1473
|
if (key === leftKey) {
|
|
1467
1474
|
result.push({
|
|
1468
1475
|
type: 'normal',
|
|
@@ -1516,7 +1523,7 @@ function useColumnVirtualize(options) {
|
|
|
1516
1523
|
}
|
|
1517
1524
|
return result;
|
|
1518
1525
|
}, []);
|
|
1519
|
-
}, [columnSlice, leftKey, rightKey, leftBlank, rightBlank]);
|
|
1526
|
+
}, [columnSlice, leftKey, rightKey, leftBlank, rightBlank, defaultColumnWidth]);
|
|
1520
1527
|
var columns = useMemo(function () {
|
|
1521
1528
|
return {
|
|
1522
1529
|
columns: columnSlice,
|
|
@@ -1599,6 +1606,8 @@ function VirtualTableCore(props, ref) {
|
|
|
1599
1606
|
_props$overscanColumn = props.overscanColumns,
|
|
1600
1607
|
overscanColumns = _props$overscanColumn === undefined ? 3 : _props$overscanColumn,
|
|
1601
1608
|
stickyHeader = props.stickyHeader,
|
|
1609
|
+
_props$defaultColumnW = props.defaultColumnWidth,
|
|
1610
|
+
defaultColumnWidth = _props$defaultColumnW === undefined ? 100 : _props$defaultColumnW,
|
|
1602
1611
|
_props$pipeline = props.pipeline,
|
|
1603
1612
|
pipeline = _props$pipeline === undefined ? TablePipeline.defaultPipeline : _props$pipeline,
|
|
1604
1613
|
rawRowClassName = props.rowClassName,
|
|
@@ -1681,7 +1690,8 @@ function VirtualTableCore(props, ref) {
|
|
|
1681
1690
|
};
|
|
1682
1691
|
}, [columnWidths, updateColumnWidths]);
|
|
1683
1692
|
var _useColumnVirtualize = useColumnVirtualize({
|
|
1684
|
-
estimateSize: estimatedColumnWidth != null ? estimatedColumnWidth :
|
|
1693
|
+
estimateSize: estimatedColumnWidth != null ? estimatedColumnWidth : defaultColumnWidth,
|
|
1694
|
+
defaultColumnWidth: defaultColumnWidth,
|
|
1685
1695
|
overscan: overscanColumns,
|
|
1686
1696
|
columns: pipelineColumns,
|
|
1687
1697
|
bodyWrapper: bodyWrapperRef,
|
|
@@ -1689,17 +1699,6 @@ function VirtualTableCore(props, ref) {
|
|
|
1689
1699
|
disabled: estimatedColumnWidth == null
|
|
1690
1700
|
}),
|
|
1691
1701
|
columns = _useColumnVirtualize.columns;
|
|
1692
|
-
if (process.env.NODE_ENV === 'development') {
|
|
1693
|
-
pipelineColumns.forEach(function (column) {
|
|
1694
|
-
if (column.width == null && column.minWidth == null) {
|
|
1695
|
-
console.warn('Missing `width` in column', column);
|
|
1696
|
-
}
|
|
1697
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
1698
|
-
if (getKey(column) == null) {
|
|
1699
|
-
console.error('Missing `dataIndex` or `key` in column', column);
|
|
1700
|
-
}
|
|
1701
|
-
});
|
|
1702
|
-
}
|
|
1703
1702
|
var onRowClassName = useCallback(function (record, index) {
|
|
1704
1703
|
return clsx(rawRowClassName == null ? undefined : rawRowClassName(record, index), rowClassName == null ? undefined : rowClassName(record, index));
|
|
1705
1704
|
}, [rawRowClassName, rowClassName]);
|