💄(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 {
|
||||
|
||||
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;
|
||||
@@ -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;
|
||||
@@ -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 && (
|
||||
<>
|
||||
<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} />}
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user