Skip to content

feat/grid-instead-of-flex #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Jun 28, 2022
Merged

feat/grid-instead-of-flex #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
33e48d6
feat(*): use grid instead of flexbox
rwieruch Jun 23, 2022
60cc37e
feat(isDiv): isDiv prop for layout to change table elments to divs
rwieruch Jun 23, 2022
6ba15e2
fix(layout): grid-template-columns becomes --data-table-library_grid-…
rwieruch Jun 23, 2022
4c55dcd
fix(grid-template-columns): use variable and minimax
rwieruch Jun 24, 2022
a40f598
fix(HeaderRow): do layout only once, but always apply hide
rwieruch Jun 24, 2022
46db864
fix(useResize): when window is small, and there is stiff and % column…
rwieruch Jun 24, 2022
b27ca0e
fix(useResize): report the correct layout
rwieruch Jun 24, 2022
15368d6
fix(resize): onLayoutChange should be called with correct value
rwieruch Jun 24, 2022
3c4b310
fix(hide): hide cells programmatically on virtual row rendering
rwieruch Jun 24, 2022
922c635
wip
rwieruch Jun 25, 2022
ddc595a
feat(hide): works for virtualized, custom, horizontalScorll now
rwieruch Jun 25, 2022
9158bc4
fix(layout): controlled resized layout works
rwieruch Jun 25, 2022
ed4825d
fix(useResize/HeaderCell): get resize/hide right
rwieruch Jun 27, 2022
2c4345b
feat(Virtualized): add TableOptions/RowOptions same as compact table
rwieruch Jun 27, 2022
7c0012f
fix(Button): button with SVG click should not be handled as row click…
rwieruch Jun 27, 2022
3f90e04
test(Taliwind): add story
rwieruch Jun 27, 2022
ece2625
test(Column-Replace): new story
rwieruch Jun 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const Features = [
'Editable',
'Data Grid',
'Column Hiding',
'Column Replace',
'Column Ordering',
'Column Grouping (WIP)',
];
Expand All @@ -42,7 +43,7 @@ export const parameters = {
'First Steps',
['Compact Table', 'Composed Table'],
'Types',
['Data', 'Compact Table', 'Composed Table', ...Features],
['Data', 'Compact Table', 'Composed Table', ...Features, 'Virtualized'],
'Compact Table',
['Base', ...Features],
'Theming',
Expand All @@ -65,7 +66,7 @@ export const parameters = {
'CRUD',
['Create', 'Update', 'Delete'],
'Misc',
['Cell', 'Row', 'Column', 'Footer', 'Actions'],
['Cell', 'Row', 'Table', 'Column', 'Footer', 'Actions'],
'Recipes',
['Controlled'],
'Client vs Server',
Expand Down
191 changes: 83 additions & 108 deletions .storybook/stories/ClientVsServer/client.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,35 +31,7 @@ storiesOf('Client vs Server', module)

const theme = useTheme({
Table: `
margin: 20px;
border-radius: 4px;
border: 1px solid #e0e0e0;
`,
BaseRow: `
height: 52px;
font-size: 14px;

border-bottom: 1px solid #e0e0e0;
`,
HeaderRow: `
font-weight: bold;
`,
Row: `
&:hover {
background-color: #f5f5f5;
}

&.row-select-selected, &.row-select-single-selected {
background-color: #edf4fb;

&:hover {
background-color: #e3eefa;
}
}
`,
BaseCell: `
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
--data-table-library_grid-template-columns: 24px repeat(5, minmax(0, 1fr));
`,
});

Expand Down Expand Up @@ -119,85 +91,88 @@ storiesOf('Client vs Server', module)
}

return (
<Table
data={data}
theme={theme}
tree={tree}
select={select}
sort={sort}
pagination={pagination}
>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCellSelect />
<HeaderCellSort resize sortKey="TASK">
Task
</HeaderCellSort>
<HeaderCellSort resize sortKey="DEADLINE">
Deadline
</HeaderCellSort>
<HeaderCellSort resize sortKey="TYPE">
Type
</HeaderCellSort>
<HeaderCellSort resize sortKey="COMPLETE">
Complete
</HeaderCellSort>
<HeaderCellSort resize sortKey="TASKS">
Tasks
</HeaderCellSort>
</HeaderRow>
</Header>

<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
<CellSelect item={item} />
<CellTree item={item}>{item.name}</CellTree>
<Cell>
{item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})}
</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.isComplete.toString()}</Cell>
<Cell>{item.nodes?.length}</Cell>
</Row>
))}
</Body>

<div
style={{
fontSize: '14px',
padding: '12px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<span>Total Pages: {pagination.state.getTotalPages(data.nodes)}</span>

<span>
Page:{' '}
{pagination.state.getPages(data.nodes).map((_, index) => (
<button
key={index}
type="button"
style={{
fontWeight: pagination.state.page === index ? 'bold' : 'normal',
}}
onClick={() => pagination.fns.onSetPage(index)}
>
{index + 1}
</button>
<>
<Table
data={data}
theme={theme}
layout={{ custom: true }}
tree={tree}
select={select}
sort={sort}
pagination={pagination}
>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCellSelect />
<HeaderCellSort resize sortKey="TASK">
Task
</HeaderCellSort>
<HeaderCellSort resize sortKey="DEADLINE">
Deadline
</HeaderCellSort>
<HeaderCellSort resize sortKey="TYPE">
Type
</HeaderCellSort>
<HeaderCellSort resize sortKey="COMPLETE">
Complete
</HeaderCellSort>
<HeaderCellSort resize sortKey="TASKS">
Tasks
</HeaderCellSort>
</HeaderRow>
</Header>

<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
<CellSelect item={item} />
<CellTree item={item}>{item.name}</CellTree>
<Cell>
{item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
})}
</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.isComplete.toString()}</Cell>
<Cell>{item.nodes?.length}</Cell>
</Row>
))}
</span>
</div>
</>
)}
</Table>
</Body>
</>
)}
</Table>

<div
style={{
fontSize: '14px',
padding: '12px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<span>Total Pages: {pagination.state.getTotalPages(data.nodes)}</span>

<span>
Page:{' '}
{pagination.state.getPages(data.nodes).map((_, index) => (
<button
key={index}
type="button"
style={{
fontWeight: pagination.state.page === index ? 'bold' : 'normal',
}}
onClick={() => pagination.fns.onSetPage(index)}
>
{index + 1}
</button>
))}
</span>
</div>
</>
);
});
38 changes: 8 additions & 30 deletions .storybook/stories/ClientVsServer/server.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,35 +25,7 @@ storiesOf('Client vs Server', module)
.add('Server-Side', () => {
const theme = useTheme({
Table: `
margin: 20px;
border-radius: 4px;
border: 1px solid #e0e0e0;
`,
BaseRow: `
height: 52px;
font-size: 14px;

border-bottom: 1px solid #e0e0e0;
`,
HeaderRow: `
font-weight: bold;
`,
Row: `
&:hover {
background-color: #f5f5f5;
}

&.row-select-selected, &.row-select-single-selected {
background-color: #edf4fb;

&:hover {
background-color: #e3eefa;
}
}
`,
BaseCell: `
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
--data-table-library_grid-template-columns: 24px repeat(4, minmax(0, 1fr));
`,
});

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

<Table data={data} theme={theme} select={select} pagination={pagination}>
<Table
data={data}
theme={theme}
layout={{ custom: true }}
select={select}
pagination={pagination}
>
{(tableList) => (
<>
<Header>
Expand Down
32 changes: 20 additions & 12 deletions .storybook/stories/Compact/column-hide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Component = () => {
};

const COLUMNS = [
{ label: 'Task', renderCell: (item) => item.name, hide: { hideKey: 'TASK' } },
{ label: 'Task', renderCell: (item) => item.name, hide: hiddenColumns.includes('TASK') },
{
label: 'Deadline',
renderCell: (item) =>
Expand All @@ -34,15 +34,19 @@ const Component = () => {
month: '2-digit',
day: '2-digit',
}),
hide: { hideKey: 'DEADLINE' },
hide: hiddenColumns.includes('DEADLINE'),
},
{ label: 'Type', renderCell: (item) => item.type, hide: { hideKey: 'TYPE' } },
{ label: 'Type', renderCell: (item) => item.type, hide: hiddenColumns.includes('TYPE') },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
hide: { hideKey: 'COMPLETE' },
hide: hiddenColumns.includes('COMPLETE'),
},
{
label: 'Tasks',
renderCell: (item) => item.nodes?.length,
hide: hiddenColumns.includes('TASKS'),
},
{ label: 'Tasks', renderCell: (item) => item.nodes?.length, hide: { hideKey: 'TASKS' } },
];

return (
Expand Down Expand Up @@ -112,7 +116,7 @@ const Component = () => {
</label>
</div>

<CompactTable columns={COLUMNS} data={data} theme={theme} layout={{ hiddenColumns }} />
<CompactTable columns={COLUMNS} data={data} theme={theme} />

<br />
<DocumentationSee anchor={'Features/' + key} />
Expand Down Expand Up @@ -148,7 +152,7 @@ const Component = () => {
};

const COLUMNS = [
{ label: 'Task', renderCell: (item) => item.name, hide: { hideKey: 'TASK' } },
{ label: 'Task', renderCell: (item) => item.name, hide: hiddenColumns.includes('TASK') },
{
label: 'Deadline',
renderCell: (item) =>
Expand All @@ -157,15 +161,19 @@ const Component = () => {
month: '2-digit',
day: '2-digit',
}),
hide: { hideKey: 'DEADLINE' },
hide: hiddenColumns.includes('DEADLINE'),
},
{ label: 'Type', renderCell: (item) => item.type, hide: { hideKey: 'TYPE' } },
{ label: 'Type', renderCell: (item) => item.type, hide: hiddenColumns.includes('TYPE') },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
hide: { hideKey: 'COMPLETE' },
hide: hiddenColumns.includes('COMPLETE'),
},
{
label: 'Tasks',
renderCell: (item) => item.nodes?.length,
hide: hiddenColumns.includes('TASKS'),
},
{ label: 'Tasks', renderCell: (item) => item.nodes?.length, hide: { hideKey: 'TASKS' } },
];

return (
Expand Down Expand Up @@ -235,7 +243,7 @@ const Component = () => {
</label>
</div>

<CompactTable columns={COLUMNS} data={data} theme={theme} layout={{ hiddenColumns }} />
<CompactTable columns={COLUMNS} data={data} theme={theme} />

<br />
<DocumentationSee anchor={'Features/' + key} />
Expand Down
Loading