Skip to content

Commit

Permalink
💄(react) make DataGrid responsive
Browse files Browse the repository at this point in the history 
Previously the DataGrid was buggy in small width containers. Now it enables
an horizontal scroll, in the future we will use cards instead.
  • Loading branch information
@NathanVss
NathanVss committed Dec 12, 2023
1 parent 6dcafa9 commit da3761b
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 153 deletions.
147 changes: 77 additions & 70 deletions packages/react/src/components/DataGrid/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.c__datagrid {

display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--c--theme--spacings--s);
position: relative;
container-type: inline-size;

&--empty {
min-height: 400px;
Expand All @@ -15,6 +15,82 @@
justify-content: center;
}

&__table__container {
width: 100%;
overflow: scroll;

> table {
border-collapse: collapse;
font-weight: var(--c--theme--font--weights--regular);
width: 100%;

th, td {
text-align: left;
padding: 0 var(--c--theme--spacings--s);
white-space: nowrap;
font-size: var(--c--theme--font--sizes--m);
height: 3rem;
}

th {
color: var(--c--theme--colors--greyscale-800);
font-weight: var(--c--theme--font--weights--bold);
font-size: var(--c--theme--font--sizes--h5);
text-transform: uppercase;

.c__datagrid__header {
display: flex;
align-items: center;

.material-icons {
color: var(--c--theme--colors--greyscale-500);
}

&--sortable {
cursor: pointer;
}

&__icon-placeholder {
width: 24px;
height: 24px;
}
}
}

td {
color: var(--c--theme--colors--greyscale-700);
}

tbody tr {
border: 1px var(--c--theme--colors--greyscale-300) solid;
}

.c__datagrid__row {
&__cell {
&--highlight {
color: var(--c--theme--colors--greyscale-800);
font-weight: var(--c--theme--font--weights--medium);
}
&--actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}

tbody {
background-color: var(--c--theme--colors--greyscale-000);
}

.c__datagrid__row__cell--select, .c__datagrid__header--select {
width: 0;
padding-right: 0;
}

}
}

&__loader {
position: absolute;
inset: 0;
Expand Down Expand Up @@ -53,75 +129,6 @@
}
}

> table {
border-collapse: collapse;
font-weight: var(--c--theme--font--weights--regular);
width: 100%;

th, td {
text-align: left;
padding: 0 var(--c--theme--spacings--s);
white-space: nowrap;
font-size: var(--c--theme--font--sizes--m);
height: 3rem;
}

th {
color: var(--c--theme--colors--greyscale-800);
font-weight: var(--c--theme--font--weights--bold);
font-size: var(--c--theme--font--sizes--h5);
text-transform: uppercase;

.c__datagrid__header {
display: flex;
align-items: center;

.material-icons {
color: var(--c--theme--colors--greyscale-500);
}

&--sortable {
cursor: pointer;
}

&__icon-placeholder {
width: 24px;
height: 24px;
}
}
}

td {
color: var(--c--theme--colors--greyscale-700);
}

tbody tr {
border: 1px var(--c--theme--colors--greyscale-300) solid;
}

.c__datagrid__row {
&__cell {
&--highlight {
color: var(--c--theme--colors--greyscale-800);
font-weight: var(--c--theme--font--weights--medium);
}
&--actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}

tbody {
background-color: var(--c--theme--colors--greyscale-000);
}

.c__datagrid__row__cell--select, .c__datagrid__header--select {
width: 0;
padding-right: 0;
}

}

}
168 changes: 85 additions & 83 deletions packages/react/src/components/DataGrid/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,98 +158,100 @@ export const DataGrid = <T extends Row>({
)}
{!isEmpty && (
<>
<table>
<thead>
{displayHeader &&
table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
<div className="c__datagrid__table__container">
<table>
<thead>
{displayHeader &&
table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th
key={header.id}
colSpan={header.colSpan}
className={classNames({
"c__datagrid__header--select":
header.id === "select",
})}
>
{header.isPlaceholder ? null : (
<div
className={classNames(
"c__datagrid__header fs-h5",
{
"c__datagrid__header--sortable":
header.column.getCanSort(),
},
)}
{...(header.column.getCanSort()
? {
role: "button",
tabIndex: 0,
onClick:
header.column.getToggleSortingHandler(),
}
: {})}
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{header.column.getIsSorted() === "asc" && (
<span className="material-icons">
arrow_drop_up
</span>
)}
{header.column.getIsSorted() === "desc" && (
<span className="material-icons">
arrow_drop_down
</span>
)}
{header.id !== "select" &&
!header.column.getIsSorted() && (
<span className="c__datagrid__header__icon-placeholder" />
)}
</div>
)}
</th>
);
})}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id} data-testid={row.id}>
{row.getVisibleCells().map((cell, i) => {
let highlight = false;
if (enableRowSelection && i > 0) {
// Enabling selection adds a column at the beginning of the table.
highlight = !!columns[i - 1].highlight;
} else {
highlight = !!columns[i].highlight;
}
return (
<th
key={header.id}
colSpan={header.colSpan}
<td
key={cell.id}
className={classNames({
"c__datagrid__header--select":
header.id === "select",
"c__datagrid__row__cell--highlight": highlight,
"c__datagrid__row__cell--actions":
cell.column.id === "actions",
"c__datagrid__row__cell--select":
cell.column.id === "select",
})}
>
{header.isPlaceholder ? null : (
<div
className={classNames(
"c__datagrid__header fs-h5",
{
"c__datagrid__header--sortable":
header.column.getCanSort(),
},
)}
{...(header.column.getCanSort()
? {
role: "button",
tabIndex: 0,
onClick:
header.column.getToggleSortingHandler(),
}
: {})}
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{header.column.getIsSorted() === "asc" && (
<span className="material-icons">
arrow_drop_up
</span>
)}
{header.column.getIsSorted() === "desc" && (
<span className="material-icons">
arrow_drop_down
</span>
)}
{header.id !== "select" &&
!header.column.getIsSorted() && (
<span className="c__datagrid__header__icon-placeholder" />
)}
</div>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</th>
</td>
);
})}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id} data-testid={row.id}>
{row.getVisibleCells().map((cell, i) => {
let highlight = false;
if (enableRowSelection && i > 0) {
// Enabling selection adds a column at the beginning of the table.
highlight = !!columns[i - 1].highlight;
} else {
highlight = !!columns[i].highlight;
}
return (
<td
key={cell.id}
className={classNames({
"c__datagrid__row__cell--highlight": highlight,
"c__datagrid__row__cell--actions":
cell.column.id === "actions",
"c__datagrid__row__cell--select":
cell.column.id === "select",
})}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
);
})}
</tr>
))}
</tbody>
</table>
</tbody>
</table>
</div>
{!!pagination && <Pagination {...pagination} />}
</>
)}
Expand Down

0 comments on commit da3761b

Please sign in to comment.