💄(react) make DataGrid responsive
Previously the DataGrid was buggy in small width containers. Now it enables an horizontal scroll, in the future we will use cards instead.
This commit is contained in:
Nathan Vasse
@@ -1,10 +1,10 @@
|
|||||||
.c__datagrid {
|
.c__datagrid {
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
gap: var(--c--theme--spacings--s);
|
gap: var(--c--theme--spacings--s);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
container-type: inline-size;
|
||||||
|
|
||||||
&--empty {
|
&--empty {
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
@@ -15,6 +15,82 @@
|
|||||||
justify-content: center;
|
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 {
|
&__loader {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -158,98 +158,100 @@ export const DataGrid = <T extends Row>({
|
|||||||
)}
|
)}
|
||||||
{!isEmpty && (
|
{!isEmpty && (
|
||||||
<>
|
<>
|
||||||
<table>
|
<div className="c__datagrid__table__container">
|
||||||
<thead>
|
<table>
|
||||||
{displayHeader &&
|
<thead>
|
||||||
table.getHeaderGroups().map((headerGroup) => (
|
{displayHeader &&
|
||||||
<tr key={headerGroup.id}>
|
table.getHeaderGroups().map((headerGroup) => (
|
||||||
{headerGroup.headers.map((header) => {
|
<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 (
|
return (
|
||||||
<th
|
<td
|
||||||
key={header.id}
|
key={cell.id}
|
||||||
colSpan={header.colSpan}
|
|
||||||
className={classNames({
|
className={classNames({
|
||||||
"c__datagrid__header--select":
|
"c__datagrid__row__cell--highlight": highlight,
|
||||||
header.id === "select",
|
"c__datagrid__row__cell--actions":
|
||||||
|
cell.column.id === "actions",
|
||||||
|
"c__datagrid__row__cell--select":
|
||||||
|
cell.column.id === "select",
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{header.isPlaceholder ? null : (
|
{flexRender(
|
||||||
<div
|
cell.column.columnDef.cell,
|
||||||
className={classNames(
|
cell.getContext(),
|
||||||
"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>
|
</td>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</thead>
|
</tbody>
|
||||||
<tbody>
|
</table>
|
||||||
{table.getRowModel().rows.map((row) => (
|
</div>
|
||||||
<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>
|
|
||||||
{!!pagination && <Pagination {...pagination} />}
|
{!!pagination && <Pagination {...pagination} />}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user