@ciromaciel/dashboard-kit 1.9.0 → 1.9.1
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/package.json +1 -1
- package/src/components/DataTable.jsx +12 -6
package/package.json
CHANGED
|
@@ -37,13 +37,16 @@ import { templateFor, ROW_PADDING, HEAD_PADDING } from './table-grid'
|
|
|
37
37
|
* bare no border and no background of its own: the table lives
|
|
38
38
|
* inside a card or panel that already draws them
|
|
39
39
|
* hideSm the GridTable name for `hideBelow`
|
|
40
|
+
* stackOnPhone below 48em the head goes and each row stacks its cells in
|
|
41
|
+
* one column — for lists where every column carries
|
|
42
|
+
* something the row needs (Posts, the People strategies)
|
|
40
43
|
* The row body is the spec's "data" role — 13px, gray.7, line-height 1.4 —
|
|
41
44
|
* which until then only the copies applied.
|
|
42
45
|
*/
|
|
43
46
|
|
|
44
47
|
const HEAD = { fz: 10, fw: 800, c: 'gray.5', tt: 'uppercase', lts: '1.5px', lh: 1.4 }
|
|
45
48
|
|
|
46
|
-
export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected, quietSelection, getRowLabel, getRowTone, renderDetail, className, bare, toolbar, footer, emptyState, loading, skeleton }) {
|
|
49
|
+
export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected, quietSelection, getRowLabel, getRowTone, renderDetail, className, bare, stackOnPhone, toolbar, footer, emptyState, loading, skeleton }) {
|
|
47
50
|
const [openKeys, setOpenKeys] = useState(() => new Set())
|
|
48
51
|
const expandable = typeof renderDetail === 'function' && typeof onRowClick !== 'function'
|
|
49
52
|
const toggle = key =>
|
|
@@ -62,7 +65,8 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
|
|
|
62
65
|
*/
|
|
63
66
|
const wide = useMediaQuery('(min-width: 48em)', true)
|
|
64
67
|
const visible = wide ? columns : columns.filter(col => !col.hideBelow && !col.hideSm)
|
|
65
|
-
const
|
|
68
|
+
const stacked = stackOnPhone && !wide
|
|
69
|
+
const template = stacked ? 'minmax(0, 1fr)' : templateFor(visible)
|
|
66
70
|
|
|
67
71
|
return (
|
|
68
72
|
<Card
|
|
@@ -74,6 +78,7 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
|
|
|
74
78
|
>
|
|
75
79
|
{toolbar}
|
|
76
80
|
|
|
81
|
+
{!stacked && (
|
|
77
82
|
<Box
|
|
78
83
|
bg="gray.1"
|
|
79
84
|
style={{
|
|
@@ -99,6 +104,7 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
|
|
|
99
104
|
),
|
|
100
105
|
)}
|
|
101
106
|
</Box>
|
|
107
|
+
)}
|
|
102
108
|
|
|
103
109
|
{/* First load: the skeleton has the SAME grid as the table, so the
|
|
104
110
|
layout doesn't jump when the data arrives (Law 3). A refetch with
|
|
@@ -150,9 +156,9 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
|
|
|
150
156
|
style={{
|
|
151
157
|
display: 'grid',
|
|
152
158
|
gridTemplateColumns: template,
|
|
153
|
-
gap: 16,
|
|
154
|
-
alignItems: 'center',
|
|
155
|
-
padding: ROW_PADDING,
|
|
159
|
+
gap: stacked ? 6 : 16,
|
|
160
|
+
alignItems: stacked ? 'start' : 'center',
|
|
161
|
+
padding: stacked ? '14px 16px' : ROW_PADDING,
|
|
156
162
|
cursor: clickable ? 'pointer' : undefined,
|
|
157
163
|
borderBottom: last && !open ? 'none' : 'var(--rlg-border)',
|
|
158
164
|
transition: 'background-color 120ms ease',
|
|
@@ -179,7 +185,7 @@ export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected,
|
|
|
179
185
|
<Box
|
|
180
186
|
key={col.key}
|
|
181
187
|
miw={0}
|
|
182
|
-
style={col.align ? { textAlign: col.align } : undefined}
|
|
188
|
+
style={col.align && !stacked ? { textAlign: col.align } : undefined}
|
|
183
189
|
>
|
|
184
190
|
{col.render(row, { open })}
|
|
185
191
|
</Box>
|