Skip to content

Commit 7489a29

Browse files
rwieruchrwieruch
authored
feat/grid-instead-of-flex (#64)
* feat(*): use grid instead of flexbox BREAKING CHANGE: The main things that have changed: - layout via `--data-table-library_grid-template-columns` (everything acceptable what a CSS `grid-template-columns` property would accept) on `Table` property when using `useTheme()` instead of width/min-width on each `BaseCell` (see FEATURES/Layout stories) - table elements (e.g. `table`, `td`, `th`) instead of div elements, but they can be transformed as div elements by using `layout={{ isDiv: true }}` (see MISC/Table story) - less internal styling (padding, margin, etc.), it should be done by individual theming instead (see FEATURES/Theme) ----- - hide feature: `hideKey: string` became `hide: boolean` on each HeaderCell/Cell, `hiddenColumns` in `layout` not necessary anymore (see FEATURES/Hide Column stories) - fixed header feature: `layout={{ fixedHeader: true }}` - controlled layout: `layout={{ resizedLayout: string }}` and `layout={{ onLayoutChange: (gridTemplateColumns: string) => void }}` instead of using `string[]` ----- - new Virtualized component for opt-in virtualization (see FEATURES/Virtualized story)
1 parent 772303f commit 7489a29

File tree

119 files changed

+2698
-2745
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

119 files changed

+2698
-2745
lines changed

‎.storybook/preview.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const Features = [
2222
'Editable',
2323
'Data Grid',
2424
'Column Hiding',
25+
'Column Replace',
2526
'Column Ordering',
2627
'Column Grouping (WIP)',
2728
];
@@ -42,7 +43,7 @@ export const parameters = {
4243
'First Steps',
4344
['Compact Table', 'Composed Table'],
4445
'Types',
45-
['Data', 'Compact Table', 'Composed Table', ...Features],
46+
['Data', 'Compact Table', 'Composed Table', ...Features, 'Virtualized'],
4647
'Compact Table',
4748
['Base', ...Features],
4849
'Theming',
@@ -65,7 +66,7 @@ export const parameters = {
6566
'CRUD',
6667
['Create', 'Update', 'Delete'],
6768
'Misc',
68-
['Cell', 'Row', 'Column', 'Footer', 'Actions'],
69+
['Cell', 'Row', 'Table', 'Column', 'Footer', 'Actions'],
6970
'Recipes',
7071
['Controlled'],
7172
'Client vs Server',

‎.storybook/stories/ClientVsServer/client.story.js

+83-108
Original file line numberDiff line numberDiff line change
@@ -31,35 +31,7 @@ storiesOf('Client vs Server', module)
3131

3232
const theme = useTheme({
3333
Table: `
34-
margin: 20px;
35-
border-radius: 4px;
36-
border: 1px solid #e0e0e0;
37-
`,
38-
BaseRow: `
39-
height: 52px;
40-
font-size: 14px;
41-
42-
border-bottom: 1px solid #e0e0e0;
43-
`,
44-
HeaderRow: `
45-
font-weight: bold;
46-
`,
47-
Row: `
48-
&:hover {
49-
background-color: #f5f5f5;
50-
}
51-
52-
&.row-select-selected, &.row-select-single-selected {
53-
background-color: #edf4fb;
54-
55-
&:hover {
56-
background-color: #e3eefa;
57-
}
58-
}
59-
`,
60-
BaseCell: `
61-
border-right: 1px solid transparent;
62-
border-bottom: 1px solid transparent;
34+
--data-table-library_grid-template-columns: 24px repeat(5, minmax(0, 1fr));
6335
`,
6436
});
6537

@@ -119,85 +91,88 @@ storiesOf('Client vs Server', module)
11991
}
12092

12193
return (
122-
<Table
123-
data={data}
124-
theme={theme}
125-
tree={tree}
126-
select={select}
127-
sort={sort}
128-
pagination={pagination}
129-
>
130-
{(tableList) => (
131-
<>
132-
<Header>
133-
<HeaderRow>
134-
<HeaderCellSelect />
135-
<HeaderCellSort resize sortKey="TASK">
136-
Task
137-
</HeaderCellSort>
138-
<HeaderCellSort resize sortKey="DEADLINE">
139-
Deadline
140-
</HeaderCellSort>
141-
<HeaderCellSort resize sortKey="TYPE">
142-
Type
143-
</HeaderCellSort>
144-
<HeaderCellSort resize sortKey="COMPLETE">
145-
Complete
146-
</HeaderCellSort>
147-
<HeaderCellSort resize sortKey="TASKS">
148-
Tasks
149-
</HeaderCellSort>
150-
</HeaderRow>
151-
</Header>
152-
153-
<Body>
154-
{tableList.map((item) => (
155-
<Row key={item.id} item={item}>
156-
<CellSelect item={item} />
157-
<CellTree item={item}>{item.name}</CellTree>
158-
<Cell>
159-
{item.deadline.toLocaleDateString('en-US', {
160-
year: 'numeric',
161-
month: '2-digit',
162-
day: '2-digit',
163-
})}
164-
</Cell>
165-
<Cell>{item.type}</Cell>
166-
<Cell>{item.isComplete.toString()}</Cell>
167-
<Cell>{item.nodes?.length}</Cell>
168-
</Row>
169-
))}
170-
</Body>
171-
172-
<div
173-
style={{
174-
fontSize: '14px',
175-
padding: '12px',
176-
display: 'flex',
177-
justifyContent: 'space-between',
178-
alignItems: 'center',
179-
}}
180-
>
181-
<span>Total Pages: {pagination.state.getTotalPages(data.nodes)}</span>
182-
183-
<span>
184-
Page:{' '}
185-
{pagination.state.getPages(data.nodes).map((_, index) => (
186-
<button
187-
key={index}
188-
type="button"
189-
style={{
190-
fontWeight: pagination.state.page === index ? 'bold' : 'normal',
191-
}}
192-
onClick={() => pagination.fns.onSetPage(index)}
193-
>
194-
{index + 1}
195-
</button>
94+
<>
95+
<Table
96+
data={data}
97+
theme={theme}
98+
layout={{ custom: true }}
99+
tree={tree}
100+
select={select}
101+
sort={sort}
102+
pagination={pagination}
103+
>
104+
{(tableList) => (
105+
<>
106+
<Header>
107+
<HeaderRow>
108+
<HeaderCellSelect />
109+
<HeaderCellSort resize sortKey="TASK">
110+
Task
111+
</HeaderCellSort>
112+
<HeaderCellSort resize sortKey="DEADLINE">
113+
Deadline
114+
</HeaderCellSort>
115+
<HeaderCellSort resize sortKey="TYPE">
116+
Type
117+
</HeaderCellSort>
118+
<HeaderCellSort resize sortKey="COMPLETE">
119+
Complete
120+
</HeaderCellSort>
121+
<HeaderCellSort resize sortKey="TASKS">
122+
Tasks
123+
</HeaderCellSort>
124+
</HeaderRow>
125+
</Header>
126+
127+
<Body>
128+
{tableList.map((item) => (
129+
<Row key={item.id} item={item}>
130+
<CellSelect item={item} />
131+
<CellTree item={item}>{item.name}</CellTree>
132+
<Cell>
133+
{item.deadline.toLocaleDateString('en-US', {
134+
year: 'numeric',
135+
month: '2-digit',
136+
day: '2-digit',
137+
})}
138+
</Cell>
139+
<Cell>{item.type}</Cell>
140+
<Cell>{item.isComplete.toString()}</Cell>
141+
<Cell>{item.nodes?.length}</Cell>
142+
</Row>
196143
))}
197-
</span>
198-
</div>
199-
</>
200-
)}
201-
</Table>
144+
</Body>
145+
</>
146+
)}
147+
</Table>
148+
149+
<div
150+
style={{
151+
fontSize: '14px',
152+
padding: '12px',
153+
display: 'flex',
154+
justifyContent: 'space-between',
155+
alignItems: 'center',
156+
}}
157+
>
158+
<span>Total Pages: {pagination.state.getTotalPages(data.nodes)}</span>
159+
160+
<span>
161+
Page:{' '}
162+
{pagination.state.getPages(data.nodes).map((_, index) => (
163+
<button
164+
key={index}
165+
type="button"
166+
style={{
167+
fontWeight: pagination.state.page === index ? 'bold' : 'normal',
168+
}}
169+
onClick={() => pagination.fns.onSetPage(index)}
170+
>
171+
{index + 1}
172+
</button>
173+
))}
174+
</span>
175+
</div>
176+
</>
202177
);
203178
});

‎.storybook/stories/ClientVsServer/server.story.js

+8-30
Original file line numberDiff line numberDiff line change
@@ -25,35 +25,7 @@ storiesOf('Client vs Server', module)
2525
.add('Server-Side', () => {
2626
const theme = useTheme({
2727
Table: `
28-
margin: 20px;
29-
border-radius: 4px;
30-
border: 1px solid #e0e0e0;
31-
`,
32-
BaseRow: `
33-
height: 52px;
34-
font-size: 14px;
35-
36-
border-bottom: 1px solid #e0e0e0;
37-
`,
38-
HeaderRow: `
39-
font-weight: bold;
40-
`,
41-
Row: `
42-
&:hover {
43-
background-color: #f5f5f5;
44-
}
45-
46-
&.row-select-selected, &.row-select-single-selected {
47-
background-color: #edf4fb;
48-
49-
&:hover {
50-
background-color: #e3eefa;
51-
}
52-
}
53-
`,
54-
BaseCell: `
55-
border-right: 1px solid transparent;
56-
border-bottom: 1px solid transparent;
28+
--data-table-library_grid-template-columns: 24px repeat(4, minmax(0, 1fr));
5729
`,
5830
});
5931

@@ -189,7 +161,13 @@ storiesOf('Client vs Server', module)
189161
Only "Ask HN"
190162
</label>
191163

192-
<Table data={data} theme={theme} select={select} pagination={pagination}>
164+
<Table
165+
data={data}
166+
theme={theme}
167+
layout={{ custom: true }}
168+
select={select}
169+
pagination={pagination}
170+
>
193171
{(tableList) => (
194172
<>
195173
<Header>

‎.storybook/stories/Compact/column-hide.js

+20-12
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Component = () => {
2525
};
2626

2727
const COLUMNS = [
28-
{ label: 'Task', renderCell: (item) => item.name, hide: { hideKey: 'TASK' } },
28+
{ label: 'Task', renderCell: (item) => item.name, hide: hiddenColumns.includes('TASK') },
2929
{
3030
label: 'Deadline',
3131
renderCell: (item) =>
@@ -34,15 +34,19 @@ const Component = () => {
3434
month: '2-digit',
3535
day: '2-digit',
3636
}),
37-
hide: { hideKey: 'DEADLINE' },
37+
hide: hiddenColumns.includes('DEADLINE'),
3838
},
39-
{ label: 'Type', renderCell: (item) => item.type, hide: { hideKey: 'TYPE' } },
39+
{ label: 'Type', renderCell: (item) => item.type, hide: hiddenColumns.includes('TYPE') },
4040
{
4141
label: 'Complete',
4242
renderCell: (item) => item.isComplete.toString(),
43-
hide: { hideKey: 'COMPLETE' },
43+
hide: hiddenColumns.includes('COMPLETE'),
44+
},
45+
{
46+
label: 'Tasks',
47+
renderCell: (item) => item.nodes?.length,
48+
hide: hiddenColumns.includes('TASKS'),
4449
},
45-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length, hide: { hideKey: 'TASKS' } },
4650
];
4751

4852
return (
@@ -112,7 +116,7 @@ const Component = () => {
112116
</label>
113117
</div>
114118

115-
<CompactTable columns={COLUMNS} data={data} theme={theme} layout={{ hiddenColumns }} />
119+
<CompactTable columns={COLUMNS} data={data} theme={theme} />
116120

117121
<br />
118122
<DocumentationSee anchor={'Features/' + key} />
@@ -148,7 +152,7 @@ const Component = () => {
148152
};
149153
150154
const COLUMNS = [
151-
{ label: 'Task', renderCell: (item) => item.name, hide: { hideKey: 'TASK' } },
155+
{ label: 'Task', renderCell: (item) => item.name, hide: hiddenColumns.includes('TASK') },
152156
{
153157
label: 'Deadline',
154158
renderCell: (item) =>
@@ -157,15 +161,19 @@ const Component = () => {
157161
month: '2-digit',
158162
day: '2-digit',
159163
}),
160-
hide: { hideKey: 'DEADLINE' },
164+
hide: hiddenColumns.includes('DEADLINE'),
161165
},
162-
{ label: 'Type', renderCell: (item) => item.type, hide: { hideKey: 'TYPE' } },
166+
{ label: 'Type', renderCell: (item) => item.type, hide: hiddenColumns.includes('TYPE') },
163167
{
164168
label: 'Complete',
165169
renderCell: (item) => item.isComplete.toString(),
166-
hide: { hideKey: 'COMPLETE' },
170+
hide: hiddenColumns.includes('COMPLETE'),
171+
},
172+
{
173+
label: 'Tasks',
174+
renderCell: (item) => item.nodes?.length,
175+
hide: hiddenColumns.includes('TASKS'),
167176
},
168-
{ label: 'Tasks', renderCell: (item) => item.nodes?.length, hide: { hideKey: 'TASKS' } },
169177
];
170178
171179
return (
@@ -235,7 +243,7 @@ const Component = () => {
235243
</label>
236244
</div>
237245
238-
<CompactTable columns={COLUMNS} data={data} theme={theme} layout={{ hiddenColumns }} />
246+
<CompactTable columns={COLUMNS} data={data} theme={theme} />
239247
240248
<br />
241249
<DocumentationSee anchor={'Features/' + key} />

0 commit comments

Comments
 (0)