@crispy-seed/data-table 0.1.1 → 0.1.3
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/dist/index.cjs +4570 -2
- package/dist/index.js +4554 -1
- package/package.json +1 -1
- package/dist/DataTable-12s-D02v6Qj5.js +0 -1523
- package/dist/DataTable-12s-Gpv6I4J8.cjs +0 -1574
- package/dist/DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs +0 -161
- package/dist/DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js +0 -153
- package/dist/Menu-12s-A4lEc__n.cjs +0 -103
- package/dist/Menu-12s-v9vnaq8F.js +0 -77
- package/dist/Select-12s-CE3SMzFp.js +0 -218
- package/dist/Select-12s-CNQC9z8t.cjs +0 -249
- package/dist/body-cells-12s-2sTwdliH.cjs +0 -461
- package/dist/body-cells-12s-Ba2uF4T-.js +0 -452
- package/dist/column-calc-12s-C1-I2KdV.js +0 -129
- package/dist/column-calc-12s-CJ26VuDJ.cjs +0 -149
- package/dist/column-layout-12s-BhQmNTJG.js +0 -99
- package/dist/column-layout-12s-k2fZYeKl.cjs +0 -120
- package/dist/column-menu-12s-6Yvu4SZ0.js +0 -406
- package/dist/column-menu-12s-BnknuXGh.cjs +0 -426
- package/dist/editors-12s-C0RxmTcI.cjs +0 -554
- package/dist/editors-12s-COixUnI2.js +0 -524
- package/dist/resize-12s-CajyNXFB.js +0 -58
- package/dist/resize-12s-ChLpxb4i.cjs +0 -58
- package/dist/states-12s-BB0PT_bq.cjs +0 -125
- package/dist/states-12s-m5mBR90e.js +0 -122
- package/dist/toolbar-12s-B1xiS-Zu.js +0 -68
- package/dist/toolbar-12s-DzLbghpK.cjs +0 -70
- package/dist/useDataTable-12s-BHiDUubw-12s-CBeCwTe7.js +0 -61
- package/dist/useDataTable-12s-BHiDUubw-12s-Dgvt7XDk.cjs +0 -61
- package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs +0 -207
- package/dist/useDataTableColumnCalc-12s-DTQQTtEJ-12s-DsEse3uq.js +0 -183
- package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CD6goR59.js +0 -289
- package/dist/useDataTableColumns-12s-Cn2ZAzFL-12s-CUk_CpYT.cjs +0 -292
- package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-BoOHq3GB.js +0 -98
- package/dist/useDataTableEdit-12s-9Wb_UCrN-12s-De6YHBba.cjs +0 -98
- package/dist/useDataTableFilter-12s-ZzbmWMin-12s-CWyBeFna.js +0 -74
- package/dist/useDataTableFilter-12s-ZzbmWMin-12s-lpjzZY3_.cjs +0 -74
- package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-BexjP6iO.js +0 -104
- package/dist/useDataTableInfiniteScroll-12s-8ZG31URd-12s-Bt8gojr9.cjs +0 -104
- package/dist/useDataTableRow-12s-CPYaDa1p-12s-4qkGoz-j.js +0 -30
- package/dist/useDataTableRow-12s-CPYaDa1p-12s-DG64uYjn.cjs +0 -30
- package/dist/useDataTableScroll-12s-BKDCr0en-12s-C7f2vHeG.js +0 -61
- package/dist/useDataTableScroll-12s-BKDCr0en-12s-CUvUYMtt.cjs +0 -61
- package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-B-65V6gH.js +0 -37
- package/dist/useDataTableSearch-12s-Ck3iWcpX-12s-DhVfN2Hq.cjs +0 -37
- package/dist/useDataTableSelection-12s-BIDtiRQq-12s-IS__VAnU.cjs +0 -71
- package/dist/useDataTableSelection-12s-BIDtiRQq-12s-O6M_BhrH.js +0 -71
- package/dist/useDataTableSort-12s-DvJYtmeS-12s-C5VGnsq4.cjs +0 -78
- package/dist/useDataTableSort-12s-DvJYtmeS-12s-DABSNt6U.js +0 -78
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
var Menu12s = require('./Menu-12s-A4lEc__n.cjs');
|
|
12
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
13
|
-
var React = require('react');
|
|
14
|
-
var DataTable12s = require('./DataTable-12s-Gpv6I4J8.cjs');
|
|
15
|
-
var columnLayout12s = require('./column-layout-12s-k2fZYeKl.cjs');
|
|
16
|
-
var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs');
|
|
17
|
-
var useDataTableColumnCalc12sDTQQTtEJ12s = require('./useDataTableColumnCalc-12s-DTQQTtEJ-12s-CvD14JYo.cjs');
|
|
18
|
-
|
|
19
|
-
function _interopNamespace(e) {
|
|
20
|
-
if (e && e.__esModule) return e;
|
|
21
|
-
var n = Object.create(null);
|
|
22
|
-
if (e) {
|
|
23
|
-
Object.keys(e).forEach(function (k) {
|
|
24
|
-
if (k !== 'default') {
|
|
25
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
26
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () { return e[k]; }
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
n.default = e;
|
|
34
|
-
return n;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
38
|
-
|
|
39
|
-
function ColumnCalcCells({ columns, rows, selectable, stickyFirst, stickyLast }) {
|
|
40
|
-
const effective = columnLayout12s.useEffectiveColumns(columns);
|
|
41
|
-
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
42
|
-
children: effective.map(({ column }, index)=>{
|
|
43
|
-
const isFirst = index === 0;
|
|
44
|
-
const isLast = index === effective.length - 1;
|
|
45
|
-
const sticky = columnLayout12s.stickyProps({
|
|
46
|
-
selectable,
|
|
47
|
-
stickyFirst,
|
|
48
|
-
stickyLast,
|
|
49
|
-
isSelectionCell: false,
|
|
50
|
-
isFirst,
|
|
51
|
-
isLast
|
|
52
|
-
});
|
|
53
|
-
return /*#__PURE__*/ jsxRuntime.jsx(DataTable12s.DataTableFooterCell, {
|
|
54
|
-
"data-sticky": sticky["data-sticky"],
|
|
55
|
-
"data-sticky-edge": sticky["data-sticky-edge"],
|
|
56
|
-
"data-sticky-edge-end": sticky["data-sticky-edge-end"],
|
|
57
|
-
style: sticky.style,
|
|
58
|
-
children: column.summary && /*#__PURE__*/ jsxRuntime.jsx(ColumnCalcCell, {
|
|
59
|
-
column: column,
|
|
60
|
-
rows: rows,
|
|
61
|
-
numeric: column.type === "number" || column.type === "currency",
|
|
62
|
-
align: column.type === "number" || column.type === "currency" ? "right" : "left"
|
|
63
|
-
})
|
|
64
|
-
}, column.key);
|
|
65
|
-
})
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
function formatCalcValue(value) {
|
|
69
|
-
return value.toLocaleString(undefined, {
|
|
70
|
-
maximumFractionDigits: 2
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* One ColumnCalc footer cell -- a click-anywhere-in-the-cell trigger (crisp's own
|
|
75
|
-
* measured 246x36 hit target, `columncalc.recipe.ts`) that reads "Add calculation"
|
|
76
|
-
* until an op is picked, then shows the computed value with its operation name beside
|
|
77
|
-
* it. The math itself (`computeColumnCalc`) is headless and independently tested;
|
|
78
|
-
* this component only resolves this column's own values and renders.
|
|
79
|
-
*/ function ColumnCalcCell({ column, rows, numeric, align }) {
|
|
80
|
-
const { getColumnCalcOp, setColumnCalcOp } = DataTable12sZml1x9Kr12s.useDataTableContext();
|
|
81
|
-
const op = getColumnCalcOp(column.key) ?? column.summaryDefaultOp;
|
|
82
|
-
const values = React__namespace.useMemo(()=>rows.map((row)=>DataTable12s.getColumnValue(column, row)), [
|
|
83
|
-
rows,
|
|
84
|
-
column
|
|
85
|
-
]);
|
|
86
|
-
const result = React__namespace.useMemo(()=>op ? useDataTableColumnCalc12sDTQQTtEJ12s.computeColumnCalc(values, op) : null, [
|
|
87
|
-
values,
|
|
88
|
-
op
|
|
89
|
-
]);
|
|
90
|
-
const ops = [
|
|
91
|
-
...useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_UNIVERSAL_CALC_OPS,
|
|
92
|
-
...numeric ? useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_NUMERIC_CALC_OPS : []
|
|
93
|
-
];
|
|
94
|
-
return /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuRoot, {
|
|
95
|
-
children: [
|
|
96
|
-
/*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuTrigger, {
|
|
97
|
-
asChild: true,
|
|
98
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("button", {
|
|
99
|
-
type: "button",
|
|
100
|
-
className: "seed-data-table-column-calc-trigger",
|
|
101
|
-
"data-align": align === "right" ? "right" : undefined,
|
|
102
|
-
children: op && result !== null ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
103
|
-
children: [
|
|
104
|
-
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
105
|
-
className: "seed-data-table-column-calc-value",
|
|
106
|
-
children: formatCalcValue(result)
|
|
107
|
-
}),
|
|
108
|
-
/*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
109
|
-
className: "seed-data-table-column-calc-op",
|
|
110
|
-
children: useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_CALC_LABEL[op]
|
|
111
|
-
}),
|
|
112
|
-
/*#__PURE__*/ jsxRuntime.jsx(DataTable12s.IconChevronDownLine_default, {
|
|
113
|
-
size: 14
|
|
114
|
-
})
|
|
115
|
-
]
|
|
116
|
-
}) : /*#__PURE__*/ jsxRuntime.jsx("span", {
|
|
117
|
-
className: "seed-data-table-column-calc-placeholder",
|
|
118
|
-
children: "Add calculation"
|
|
119
|
-
})
|
|
120
|
-
})
|
|
121
|
-
}),
|
|
122
|
-
/*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuPositioner, {
|
|
123
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuContent, {
|
|
124
|
-
style: {
|
|
125
|
-
minWidth: 160
|
|
126
|
-
},
|
|
127
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs(Menu12s.MenuScrollArea, {
|
|
128
|
-
children: [
|
|
129
|
-
ops.map((candidate)=>/*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
|
|
130
|
-
onClick: ()=>setColumnCalcOp(column.key, candidate),
|
|
131
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
|
|
132
|
-
children: useDataTableColumnCalc12sDTQQTtEJ12s.DATA_TABLE_CALC_LABEL[candidate]
|
|
133
|
-
})
|
|
134
|
-
}, candidate)),
|
|
135
|
-
op && /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItem, {
|
|
136
|
-
onClick: ()=>setColumnCalcOp(column.key, undefined),
|
|
137
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(Menu12s.MenuItemLabel, {
|
|
138
|
-
children: "Clear"
|
|
139
|
-
})
|
|
140
|
-
})
|
|
141
|
-
]
|
|
142
|
-
})
|
|
143
|
-
})
|
|
144
|
-
})
|
|
145
|
-
]
|
|
146
|
-
});
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
exports.ColumnCalcCells = ColumnCalcCells;
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
import * as React from 'react';
|
|
12
|
-
import { u as useDataTableContext } from './DataTable-12s-Zml1x9Kr-12s-BR-yHfob.js';
|
|
13
|
-
|
|
14
|
-
/** The subset of `useDataTableContext()` every "resolve which columns to actually
|
|
15
|
-
* render, in what order, under what label/width" helper below needs -- narrowed so
|
|
16
|
-
* each helper's own signature documents exactly what it reads, rather than the whole
|
|
17
|
-
* table API. */ function useEffectiveColumns(columns) {
|
|
18
|
-
const { visibleColumnOrder, getColumnLabel, getColumnWidth } = useDataTableContext();
|
|
19
|
-
return React.useMemo(()=>{
|
|
20
|
-
const byKey = new Map(columns.map((column)=>[
|
|
21
|
-
column.key,
|
|
22
|
-
column
|
|
23
|
-
]));
|
|
24
|
-
return visibleColumnOrder.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>({
|
|
25
|
-
column,
|
|
26
|
-
label: getColumnLabel(column.key, column.header),
|
|
27
|
-
width: getColumnWidth(column.key) ?? column.width
|
|
28
|
-
}));
|
|
29
|
-
}, [
|
|
30
|
-
columns,
|
|
31
|
-
visibleColumnOrder,
|
|
32
|
-
getColumnLabel,
|
|
33
|
-
getColumnWidth
|
|
34
|
-
]);
|
|
35
|
-
}
|
|
36
|
-
/** Sticky positioning for the leading/trailing visible cell of a row (header, body, or
|
|
37
|
-
* footer) -- `stickyFirst` pins the SELECTION cell when the table has one, plus the
|
|
38
|
-
* first data column; `stickyLast` always pins the last VISIBLE data column. Only the
|
|
39
|
-
* OUTERMOST sticky cell on each side gets `data-sticky-edge(-end)` -- that's the one
|
|
40
|
-
* whose shadow should reveal on scroll, not every sticky cell.
|
|
41
|
-
*
|
|
42
|
-
* When both a selection column and a sticky first data column are present, the edge
|
|
43
|
-
* is the data column (e.g. Company), not the 40px selection cell: the data column is
|
|
44
|
-
* ALSO `position: sticky`, sitting immediately to its right, so a shadow cast from the
|
|
45
|
-
* selection cell's trailing edge would render directly underneath that opaque sticky
|
|
46
|
-
* cell and never actually be visible. Putting `data-sticky-edge` on the trailing-most
|
|
47
|
-
* sticky-left cell is what makes the shadow render somewhere unobstructed -- past the
|
|
48
|
-
* whole pinned group, not between two members of it. */ function stickyProps(options) {
|
|
49
|
-
const { selectable, stickyFirst, stickyLast, isSelectionCell, isFirst, isLast } = options;
|
|
50
|
-
if (stickyFirst && isSelectionCell) {
|
|
51
|
-
// Still sticky either way. The edge marker only belongs here when there is no
|
|
52
|
-
// sticky first DATA column to hand it to instead (i.e. no columns at all) --
|
|
53
|
-
// otherwise that data column is the true trailing edge of the pinned group.
|
|
54
|
-
return selectable ? {
|
|
55
|
-
"data-sticky": "",
|
|
56
|
-
style: {
|
|
57
|
-
insetInlineStart: 0
|
|
58
|
-
}
|
|
59
|
-
} : {
|
|
60
|
-
"data-sticky": "",
|
|
61
|
-
"data-sticky-edge": "",
|
|
62
|
-
style: {
|
|
63
|
-
insetInlineStart: 0
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
if (stickyFirst && isFirst && !selectable) {
|
|
68
|
-
return {
|
|
69
|
-
"data-sticky": "",
|
|
70
|
-
"data-sticky-edge": "",
|
|
71
|
-
style: {
|
|
72
|
-
insetInlineStart: 0
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
if (stickyFirst && isFirst && selectable) {
|
|
77
|
-
// The trailing edge of the pinned group -- past the 40px selection cell, so this
|
|
78
|
-
// is where the scroll shadow actually renders unobstructed.
|
|
79
|
-
return {
|
|
80
|
-
"data-sticky": "",
|
|
81
|
-
"data-sticky-edge": "",
|
|
82
|
-
style: {
|
|
83
|
-
insetInlineStart: 40
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
if (stickyLast && isLast) {
|
|
88
|
-
return {
|
|
89
|
-
"data-sticky": "",
|
|
90
|
-
"data-sticky-edge-end": "",
|
|
91
|
-
style: {
|
|
92
|
-
insetInlineEnd: 0
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
return {};
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
export { stickyProps as s, useEffectiveColumns as u };
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
function __insertCSS(code) {
|
|
3
|
-
if (!code || typeof document == 'undefined') return
|
|
4
|
-
let head = document.head || document.getElementsByTagName('head')[0]
|
|
5
|
-
let style = document.createElement('style')
|
|
6
|
-
style.type = 'text/css'
|
|
7
|
-
head.appendChild(style)
|
|
8
|
-
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
var React = require('react');
|
|
12
|
-
var DataTable12sZml1x9Kr12s = require('./DataTable-12s-Zml1x9Kr-12s-B-mwMBhn.cjs');
|
|
13
|
-
|
|
14
|
-
function _interopNamespace(e) {
|
|
15
|
-
if (e && e.__esModule) return e;
|
|
16
|
-
var n = Object.create(null);
|
|
17
|
-
if (e) {
|
|
18
|
-
Object.keys(e).forEach(function (k) {
|
|
19
|
-
if (k !== 'default') {
|
|
20
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function () { return e[k]; }
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
n.default = e;
|
|
29
|
-
return n;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
|
-
|
|
34
|
-
/** The subset of `useDataTableContext()` every "resolve which columns to actually
|
|
35
|
-
* render, in what order, under what label/width" helper below needs -- narrowed so
|
|
36
|
-
* each helper's own signature documents exactly what it reads, rather than the whole
|
|
37
|
-
* table API. */ function useEffectiveColumns(columns) {
|
|
38
|
-
const { visibleColumnOrder, getColumnLabel, getColumnWidth } = DataTable12sZml1x9Kr12s.useDataTableContext();
|
|
39
|
-
return React__namespace.useMemo(()=>{
|
|
40
|
-
const byKey = new Map(columns.map((column)=>[
|
|
41
|
-
column.key,
|
|
42
|
-
column
|
|
43
|
-
]));
|
|
44
|
-
return visibleColumnOrder.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>({
|
|
45
|
-
column,
|
|
46
|
-
label: getColumnLabel(column.key, column.header),
|
|
47
|
-
width: getColumnWidth(column.key) ?? column.width
|
|
48
|
-
}));
|
|
49
|
-
}, [
|
|
50
|
-
columns,
|
|
51
|
-
visibleColumnOrder,
|
|
52
|
-
getColumnLabel,
|
|
53
|
-
getColumnWidth
|
|
54
|
-
]);
|
|
55
|
-
}
|
|
56
|
-
/** Sticky positioning for the leading/trailing visible cell of a row (header, body, or
|
|
57
|
-
* footer) -- `stickyFirst` pins the SELECTION cell when the table has one, plus the
|
|
58
|
-
* first data column; `stickyLast` always pins the last VISIBLE data column. Only the
|
|
59
|
-
* OUTERMOST sticky cell on each side gets `data-sticky-edge(-end)` -- that's the one
|
|
60
|
-
* whose shadow should reveal on scroll, not every sticky cell.
|
|
61
|
-
*
|
|
62
|
-
* When both a selection column and a sticky first data column are present, the edge
|
|
63
|
-
* is the data column (e.g. Company), not the 40px selection cell: the data column is
|
|
64
|
-
* ALSO `position: sticky`, sitting immediately to its right, so a shadow cast from the
|
|
65
|
-
* selection cell's trailing edge would render directly underneath that opaque sticky
|
|
66
|
-
* cell and never actually be visible. Putting `data-sticky-edge` on the trailing-most
|
|
67
|
-
* sticky-left cell is what makes the shadow render somewhere unobstructed -- past the
|
|
68
|
-
* whole pinned group, not between two members of it. */ function stickyProps(options) {
|
|
69
|
-
const { selectable, stickyFirst, stickyLast, isSelectionCell, isFirst, isLast } = options;
|
|
70
|
-
if (stickyFirst && isSelectionCell) {
|
|
71
|
-
// Still sticky either way. The edge marker only belongs here when there is no
|
|
72
|
-
// sticky first DATA column to hand it to instead (i.e. no columns at all) --
|
|
73
|
-
// otherwise that data column is the true trailing edge of the pinned group.
|
|
74
|
-
return selectable ? {
|
|
75
|
-
"data-sticky": "",
|
|
76
|
-
style: {
|
|
77
|
-
insetInlineStart: 0
|
|
78
|
-
}
|
|
79
|
-
} : {
|
|
80
|
-
"data-sticky": "",
|
|
81
|
-
"data-sticky-edge": "",
|
|
82
|
-
style: {
|
|
83
|
-
insetInlineStart: 0
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
if (stickyFirst && isFirst && !selectable) {
|
|
88
|
-
return {
|
|
89
|
-
"data-sticky": "",
|
|
90
|
-
"data-sticky-edge": "",
|
|
91
|
-
style: {
|
|
92
|
-
insetInlineStart: 0
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
if (stickyFirst && isFirst && selectable) {
|
|
97
|
-
// The trailing edge of the pinned group -- past the 40px selection cell, so this
|
|
98
|
-
// is where the scroll shadow actually renders unobstructed.
|
|
99
|
-
return {
|
|
100
|
-
"data-sticky": "",
|
|
101
|
-
"data-sticky-edge": "",
|
|
102
|
-
style: {
|
|
103
|
-
insetInlineStart: 40
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
}
|
|
107
|
-
if (stickyLast && isLast) {
|
|
108
|
-
return {
|
|
109
|
-
"data-sticky": "",
|
|
110
|
-
"data-sticky-edge-end": "",
|
|
111
|
-
style: {
|
|
112
|
-
insetInlineEnd: 0
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
return {};
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
exports.stickyProps = stickyProps;
|
|
120
|
-
exports.useEffectiveColumns = useEffectiveColumns;
|