Comments (23)
softmarshmallow
commented on September 28, 2024
8
[Solution for Nextjs 14 / tailwindcss users]
Ok. here's the hotfix. for those who uses tailwindcss, you can notice nested error while building (found out the hard way - warning won't show by default, but if you copy & paste the css to your own css file, then import, it will tell which part is misconfigured.)
TL;DR (based on nextjs 14 + tailwindcss)
Move your css import from .tsx (.js / .jsx) to globals.css
your-component-file.tsx
// remove this line
// import "react-data-grid/lib/styles.css";your globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* add here - see https://github.com/adazzle/react-data-grid/issues/3460#issuecomment-2016837753 */
@import "react-data-grid/lib/styles.css";
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 255, 255, 255;
--background-end-rgb: 255, 255, 255;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}postcss.config.js
module.exports = {
plugins: {
// added
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};from react-data-grid.
Phucthuhigh
commented on September 28, 2024
2
Has anyone found a solution yet? I've tried all of the solutions above and none of them worked. I've been stuck with this error for a week now and have no idea how to fix it.:(
from react-data-grid.
softmarshmallow
commented on September 28, 2024
1
I've narrowed it down to issue related to css layer.
Original css (library, untouched)
.cj343x07-0-0-beta-42 {
@layer rdg.Cell {
/* max-content does not work with size containment
* dynamically switching between different containment styles incurs a heavy relayout penalty
* Chromium bug: at odd zoom levels or subpixel positioning,
* layout/paint/style containment can make cell borders disappear
* https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
*/
position: relative; /* needed for absolute positioning to work */
padding-block: 0;
padding-inline: 8px;
border-inline-end: 1px solid var(--rdg-border-color);
border-block-end: 1px solid var(--rdg-border-color);
grid-row-start: var(--rdg-grid-row-start);
background-color: inherit;
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
outline: none;
&[aria-selected='true'] {
outline: 2px solid var(--rdg-selection-color);
outline-offset: -2px;
}
}
}NextJS Build output
.cj343x07-0-0-beta-42 {
@layer rdg.Cell {
position: relative;
padding-block:0;padding-inline:8px;border-inline-end:1px solid var(--rdg-border-color);border-block-end: 1px solid var(--rdg-border-color);
grid-row-start: var(--rdg-grid-row-start);
background-color: inherit;
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
outline: none;
&[aria-selected=true] {
outline: 2px solid var(--rdg-selection-color);
outline-offset: -2px
}
}
}It's identical at this moment, If I remove (unwrap) @layer rdg.Cell { ... } the style will start working again.
Full css chunk on production
@layer rdg {
@layer Defaults, FocusSink, CheckboxInput, CheckboxIcon, CheckboxLabel, Cell, HeaderCell, SummaryCell, EditCell, Row, HeaderRow, SummaryRow, GroupedRow, Root}
.cj343x07-0-0-beta-42,.mlln6zg7-0-0-beta-42 {
@layer rdg.Cell {
position: relative;
padding-block:0;padding-inline:8px;border-inline-end:1px solid var(--rdg-border-color);border-block-end: 1px solid var(--rdg-border-color);
grid-row-start: var(--rdg-grid-row-start);
background-color: inherit;
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
outline: none;
&[aria-selected=true] {
outline: 2px solid var(--rdg-selection-color);
outline-offset: -2px
}
}
}
.c1bn88vv7-0-0-beta-42,.c1qt073l7-0-0-beta-42,.cf71kmq7-0-0-beta-42,.ch2wcw87-0-0-beta-42,.csofj7r7-0-0-beta-42 {
@layer rdg.CheckboxIcon {
content: "";
inline-size: 20px;
block-size: 20px;
border-left-color: var(--rdg-border-color);
border-left-style: solid;
border-left-width: 2px;
border-bottom-color: var(--rdg-border-color);
border-bottom-style: solid;
border-bottom-width: 2px;
border-right-color: var(--rdg-border-color);
border-right-style: solid;
border-right-width: 2px;
border-top-color: var(--rdg-border-color);
border-top-style: solid;
border-top-width: 2px;
background-color: var(--rdg-background-color);
.c1qt073l7-0-0-beta-42:checked+& {
background-color: var(--rdg-checkbox-color);
outline: 4px solid var(--rdg-background-color);
outline-offset: -6px
}
.c1qt073l7-0-0-beta-42:focus+& {
border-color: var(--rdg-checkbox-focus-color)
}
}
}
.c1lwve4p7-0-0-beta-42 {
@layer rdg.CheckboxLabel {
cursor: default;
.cf71kmq7-0-0-beta-42 {
border-color: var(--rdg-checkbox-disabled-border-color);
background-color: var(--rdg-checkbox-disabled-background-color)
}
}
}
.cz54e4y7-0-0-beta-42,.g1s9ylgp7-0-0-beta-42 {
@layer rdg.GroupCellCaret {
margin-inline-start:4px;stroke: currentColor;
stroke-width: 1.5px;
fill: transparent;
vertical-align: middle;
>path {
transition: d .1s
}
}
}
.c1w9bbhr7-0-0-beta-42 {
@layer rdg.DragHandle {
--rdg-drag-handle-size: 8px;
z-index: 0;
cursor: move;
inline-size: var(--rdg-drag-handle-size);
block-size: var(--rdg-drag-handle-size);
background-color: var(--rdg-selection-color);
place-self: end;
&:hover {
--rdg-drag-handle-size: 16px;
border: 2px solid var(--rdg-selection-color);
background-color: var(--rdg-background-color)
}
}
}
.c1creorc7-0-0-beta-42,.c1kqdw7y7-0-0-beta-42,.c6l2wv17-0-0-beta-42,.cis5rrm7-0-0-beta-42,.h44jtk67-0-0-beta-42,.hcgkhxz7-0-0-beta-42,.r1y6ywlx7-0-0-beta-42 {
@layer rdg.HeaderCell {
cursor: col-resize;
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inline-size: 10px
}
}
.c1bezg5o7-0-0-beta-42 {
opacity: .5
}
.c1vc96037-0-0-beta-42 {
background-color: var(--rdg-header-draggable-background-color)
}
.r1upfr807-0-0-beta-42 {
@layer rdg.Row {
display: contents;
line-height: var(--rdg-row-height);
background-color: var(--rdg-background-color);
&:hover {
background-color: var(--rdg-row-hover-background-color)
}
&[aria-selected=true] {
background-color: var(--rdg-row-selected-background-color);
&:hover {
background-color: var(--rdg-row-selected-hover-background-color)
}
}
}
}
.r139qu9m7-0-0-beta-42,.r190mhd37-0-0-beta-42 {
@layer rdg.FocusSink {
&:before {
content: "";
display: inline-block;
height: 100%;
position: sticky;
inset-inline-start: 0;
border-inline-start:2px solid var(--rdg-selection-color)}
}
}
.h10tskcx7-0-0-beta-42 {
@layer rdg.HeaderRow {
display: contents;
line-height: var(--rdg-header-row-height);
background-color: var(--rdg-header-background-color);
font-weight: 700;
&>.cj343x07-0-0-beta-42 {
z-index: 2;
position: sticky
}
&>.csofj7r7-0-0-beta-42 {
z-index: 3
}
}
}
.c6ra8a37-0-0-beta-42,.cq910m07-0-0-beta-42 {
@layer rdg.Cell {
background-color: #ccf;
&.c6ra8a37-0-0-beta-42 {
background-color: #99f
}
}
}
.a3ejtar7-0-0-beta-42 {
@layer rdg.SortIcon {
fill: currentColor;
>path {
transition: d .1s
}
}
}
.rnvodz57-0-0-beta-42 {
@layer rdg.Defaults {
*,:after,:before {
box-sizing: inherit
}
}
@layer rdg.Root {
--rdg-color: #000;
--rdg-border-color: #ddd;
--rdg-summary-border-color: #aaa;
--rdg-background-color: #fff;
--rdg-header-background-color: #f9f9f9;
--rdg-header-draggable-background-color: #e7e7e7;
--rdg-row-hover-background-color: #f5f5f5;
--rdg-row-selected-background-color: #dbecfa;
--rdg-row-selected-hover-background-color: #c9e3f8;
--rdg-checkbox-color: #005194;
--rdg-checkbox-focus-color: #61b8ff;
--rdg-checkbox-disabled-border-color: #ccc;
--rdg-checkbox-disabled-background-color: #ddd;
--rdg-selection-color: #66afe9;
--rdg-font-size: 14px;
display: grid;
color-scheme: var(--rdg-color-scheme,light dark);
contain: content;
content-visibility: auto;
block-size: 350px;
border-left-color: var(--rdg-border-color);
border-left-style: solid;
border-left-width: 1px;
border-bottom-color: var(--rdg-border-color);
border-bottom-style: solid;
border-bottom-width: 1px;
border-right-color: var(--rdg-border-color);
border-right-style: solid;
border-right-width: 1px;
border-top-color: var(--rdg-border-color);
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
overflow: auto;
background-color: var(--rdg-background-color);
color: var(--rdg-color);
font-size: var(--rdg-font-size);
&:before {
content: "";
grid-column: 1/-1;
grid-row: 1/-1
}
&.rdg-dark {
--rdg-color-scheme: dark;
--rdg-color: #ddd;
--rdg-border-color: #444;
--rdg-summary-border-color: #555;
--rdg-background-color: #212121;
--rdg-header-background-color: #1b1b1b;
--rdg-header-draggable-background-color: #2d2d2d;
--rdg-row-hover-background-color: #171717;
--rdg-row-selected-background-color: #1a73bc;
--rdg-row-selected-hover-background-color: #1768ab;
--rdg-checkbox-color: #94cfff;
--rdg-checkbox-focus-color: #c7e6ff;
--rdg-checkbox-disabled-border-color: #000;
--rdg-checkbox-disabled-background-color: #333
}
&.rdg-light {
--rdg-color-scheme: light
}
@media (prefers-color-scheme: dark) {
&:not(.rdg-light) {
--rdg-color:#ddd;
--rdg-border-color: #444;
--rdg-summary-border-color: #555;
--rdg-background-color: #212121;
--rdg-header-background-color: #1b1b1b;
--rdg-header-draggable-background-color: #2d2d2d;
--rdg-row-hover-background-color: #171717;
--rdg-row-selected-background-color: #1a73bc;
--rdg-row-selected-hover-background-color: #1768ab;
--rdg-checkbox-color: #94cfff;
--rdg-checkbox-focus-color: #c7e6ff;
--rdg-checkbox-disabled-border-color: #000;
--rdg-checkbox-disabled-background-color: #333
}
}
}
}
.vlqv91k7-0-0-beta-42 {
@layer rdg.Root {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
& .r1upfr807-0-0-beta-42 {
cursor: move
}
}
}
.f1cte0lg7-0-0-beta-42,.f1lsfrzw7-0-0-beta-42,.s8wc6fl7-0-0-beta-42,.skuhp557-0-0-beta-42 {
@layer rdg.SummaryRow {
line-height: var(--rdg-summary-row-height);
>.cj343x07-0-0-beta-42 {
position: sticky
}
}
}
.tf8l5ub7-0-0-beta-42 {
@layer rdg.SummaryRow {
>.cj343x07-0-0-beta-42 {
z-index: 2
}
>.csofj7r7-0-0-beta-42 {
z-index: 3
}
}
}
.tb9ughf7-0-0-beta-42 {
@layer rdg.SummaryRow {
>.cj343x07-0-0-beta-42 {
border-block-end:2px solid var(--rdg-summary-border-color)}
}
}
.b1yssfnt7-0-0-beta-42 {
@layer rdg.SummaryRow {
>.cj343x07-0-0-beta-42 {
border-block-start: 2px solid var(--rdg-summary-border-color)
}
}
}
.g1yxluv37-0-0-beta-42 {
@layer rdg.GroupedRow {
&:not([aria-selected=true]) {
background-color: var(--rdg-header-background-color)
}
>.cj343x07-0-0-beta-42:not(:last-child):not(.ch2wcw87-0-0-beta-42) {
border-inline-end:none}
}
}
.t7vyx3i7-0-0-beta-42 {
@layer rdg.TextEditor {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
inline-size: 100%;
block-size: 100%;
padding-block:0;padding-inline:6px;border-left-color: #ccc;
border-left-style: solid;
border-left-width: 2px;
border-bottom-color: #ccc;
border-bottom-style: solid;
border-bottom-width: 2px;
border-right-color: #ccc;
border-right-style: solid;
border-right-width: 2px;
border-top-color: #ccc;
border-top-style: solid;
border-top-width: 2px;
vertical-align: top;
color: var(--rdg-color);
background-color: var(--rdg-background-color);
font-family: inherit;
font-size: var(--rdg-font-size);
&:focus {
border-color: var(--rdg-selection-color);
outline: none
}
&::-moz-placeholder {
color: #999;
opacity: 1
}
&::placeholder {
color: #999;
opacity: 1
}
}
}from react-data-grid.
hari-bhandari
commented on September 28, 2024
1
hi guys, any updates on this, ui crashes on production mode, using mui not tailwind
from react-data-grid.
abindaz
commented on September 28, 2024
1
react-data-grid built with zero runtime, that's why occurs this error. You should import data grid css file globally.
I have created a global css file. Then, copied all CSS from react-data-grid. It fixes some of my issues, Like, Freezing particular columns is now working for me. For other features, you can customize the CSS file.
from react-data-grid.
softmarshmallow
commented on September 28, 2024
1
This issue is set of multiple styling issues. Let's break down and tackle one by one.
Case - Cell selection outline not showing on deployment
As you can see above, the outline property syntax is broken.
Hot fix: (replace with your own colors)
.rdg {
--rdg-color: hsl(var(--foreground));
--rdg-border-color: hsl(var(--border));
--rdg-summary-border-color: hsl(var(--border));
--rdg-background-color: hsl(var(--background));
--rdg-header-background-color: hsl(var(--background));
--rdg-header-draggable-background-color: hsl(var(--background));
--rdg-row-hover-background-color: hsl(var(--muted));
--rdg-row-selected-background-color: hsl(var(--muted));
--rdg-row-selected-hover-background-color: hsl(var(--muted));
--rdg-checkbox-color: hsl(207deg 100% 29%);
--rdg-checkbox-focus-color: hsl(207deg 100% 69%);
--rdg-checkbox-disabled-border-color: #ccc;
--rdg-checkbox-disabled-background-color: #ddd;
--rdg-selection-color: hsl(var(--ring));
--rdg-font-size: 13px;
--rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
}
.rdg-cell[aria-selected="true"] {
box-shadow: inset 0 0 0 1px var(--rdg-selection-color);
outline: 2px solid var(--rdg-selection-color);
}Here's my full custom css override for dedicated to this issue
.rdg {
--rdg-color: hsl(var(--foreground));
--rdg-border-color: hsl(var(--border));
--rdg-summary-border-color: hsl(var(--border));
--rdg-background-color: hsl(var(--background));
--rdg-header-background-color: hsl(var(--background));
--rdg-header-draggable-background-color: hsl(var(--background));
--rdg-row-hover-background-color: hsl(var(--muted));
--rdg-row-selected-background-color: hsl(var(--muted));
--rdg-row-selected-hover-background-color: hsl(var(--muted));
--rdg-checkbox-color: hsl(207deg 100% 29%);
--rdg-checkbox-focus-color: hsl(207deg 100% 69%);
--rdg-checkbox-disabled-border-color: #ccc;
--rdg-checkbox-disabled-background-color: #ddd;
--rdg-selection-color: hsl(var(--ring));
--rdg-font-size: 13px;
--rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
}
.rdg-header-row > .rdg-cell {
border-top: 1px solid hsl(var(--border));
border-bottom: 1px solid hsl(var(--border));
}
.rdg-cell[aria-selected="true"] {
box-shadow: inset 0 0 0 1px var(--rdg-selection-color);
outline: 2px solid var(--rdg-selection-color);
}https://github.com/gridaco/grida/blob/main/apps/forms/scaffolds/grid/grid.css
from react-data-grid.
abindaz
commented on September 28, 2024
In my case, I'm not able to use the features, text edit, column resize, or sticky column. The table will be working fine if I avoid these features.
from react-data-grid.
abenhamdine
commented on September 28, 2024
FWIW we use this library with nextjs 14, in client components (with 'use client' directive) and it works perfectly
from react-data-grid.
softmarshmallow
commented on September 28, 2024
This happens on production. works fine on dev
from react-data-grid.
softmarshmallow
commented on September 28, 2024
@abindaz Did you happen to solve this?
from react-data-grid.
softmarshmallow
commented on September 28, 2024
In 7.0.0-beta.42, the css class names are transformed (at least it seems)
Yet this is inteded, this library uses linaria.
this is from node_modules directory
node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-data-grid/lib/styles.css
@layer rdg {
@layer Defaults,
FocusSink,
CheckboxInput,
CheckboxIcon,
CheckboxLabel,
Cell,
HeaderCell,
SummaryCell,
EditCell,
Row,
HeaderRow,
SummaryRow,
GroupedRow,
Root;
}
.mlln6zg7-0-0-beta-42 {
@layer rdg.MeasuringCell {
contain: strict;
grid-row: 1;
visibility: hidden;
}
}
.cj343x07-0-0-beta-42 {
@layer rdg.Cell {
/* max-content does not work with size containment
* dynamically switching between different containment styles incurs a heavy relayout penalty
* Chromium bug: at odd zoom levels or subpixel positioning,
* layout/paint/style containment can make cell borders disappear
* https://bugs.chromium.org/p/chromium/issues/detail?id=1326946
*/
position: relative; /* needed for absolute positioning to work */
padding-block: 0;
padding-inline: 8px;
border-inline-end: 1px solid var(--rdg-border-color);
border-block-end: 1px solid var(--rdg-border-color);
grid-row-start: var(--rdg-grid-row-start);
background-color: inherit;
white-space: nowrap;
overflow: clip;
text-overflow: ellipsis;
outline: none;
&[aria-selected='true'] {
outline: 2px solid var(--rdg-selection-color);
outline-offset: -2px;
}
}
}
.csofj7r7-0-0-beta-42 {
@layer rdg.Cell {
position: sticky;
/* Should have a higher value than 0 to show up above unfrozen cells */
z-index: 1;
}
}
.ch2wcw87-0-0-beta-42 {
@layer rdg.Cell {
box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
}
}
.c1bn88vv7-0-0-beta-42 {
@layer rdg.CheckboxLabel {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
inset: 0;
margin-inline-end: 1px; /* align checkbox in row group cell */
}
}
.c1qt073l7-0-0-beta-42 {
@layer rdg.CheckboxInput {
all: unset;
}
}
.cf71kmq7-0-0-beta-42 {
@layer rdg.CheckboxIcon {
content: '';
inline-size: 20px;
block-size: 20px;
border: 2px solid var(--rdg-border-color);
background-color: var(--rdg-background-color);
.c1qt073l7-0-0-beta-42:checked + & {
background-color: var(--rdg-checkbox-color);
outline: 4px solid var(--rdg-background-color);
outline-offset: -6px;
}
.c1qt073l7-0-0-beta-42:focus + & {
border-color: var(--rdg-checkbox-focus-color);
}
}
}
.c1lwve4p7-0-0-beta-42 {
@layer rdg.CheckboxLabel {
cursor: default;
.cf71kmq7-0-0-beta-42 {
border-color: var(--rdg-checkbox-disabled-border-color);
background-color: var(--rdg-checkbox-disabled-background-color);
}
}
}
.g1s9ylgp7-0-0-beta-42 {
@layer rdg.GroupCellContent {
outline: none;
}
}
.cz54e4y7-0-0-beta-42 {
@layer rdg.GroupCellCaret {
margin-inline-start: 4px;
stroke: currentColor;
stroke-width: 1.5px;
fill: transparent;
vertical-align: middle;
> path {
transition: d 0.1s;
}
}
}
.c1w9bbhr7-0-0-beta-42 {
@layer rdg.DragHandle {
--rdg-drag-handle-size: 8px;
z-index: 0;
cursor: move;
inline-size: var(--rdg-drag-handle-size);
block-size: var(--rdg-drag-handle-size);
background-color: var(--rdg-selection-color);
place-self: end;
&:hover {
--rdg-drag-handle-size: 16px;
border: 2px solid var(--rdg-selection-color);
background-color: var(--rdg-background-color);
}
}
}
.c1creorc7-0-0-beta-42 {
@layer rdg.DragHandle {
z-index: 1;
position: sticky;
}
}
.cis5rrm7-0-0-beta-42 {
@layer rdg.EditCell {
padding: 0;
}
}
.h44jtk67-0-0-beta-42 {
@layer rdg.SortableHeaderCell {
display: flex;
}
}
.hcgkhxz7-0-0-beta-42 {
@layer rdg.SortableHeaderCellName {
flex-grow: 1;
overflow: clip;
text-overflow: ellipsis;
}
}
.c6l2wv17-0-0-beta-42 {
@layer rdg.HeaderCell {
cursor: pointer;
}
}
.c1kqdw7y7-0-0-beta-42 {
@layer rdg.HeaderCell {
touch-action: none;
}
}
.r1y6ywlx7-0-0-beta-42 {
@layer rdg.HeaderCell {
cursor: col-resize;
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inline-size: 10px;
}
}
.c1bezg5o7-0-0-beta-42 {
opacity: 0.5;
}
.c1vc96037-0-0-beta-42 {
background-color: var(--rdg-header-draggable-background-color);
}
.r1upfr807-0-0-beta-42 {
@layer rdg.Row {
display: contents;
line-height: var(--rdg-row-height);
background-color: var(--rdg-background-color);
&:hover {
background-color: var(--rdg-row-hover-background-color);
}
&[aria-selected='true'] {
background-color: var(--rdg-row-selected-background-color);
&:hover {
background-color: var(--rdg-row-selected-hover-background-color);
}
}
}
}
.r190mhd37-0-0-beta-42 {
@layer rdg.FocusSink {
outline: 2px solid var(--rdg-selection-color);
outline-offset: -2px;
}
}
.r139qu9m7-0-0-beta-42 {
@layer rdg.FocusSink {
&::before {
content: '';
display: inline-block;
height: 100%;
position: sticky;
inset-inline-start: 0;
border-inline-start: 2px solid var(--rdg-selection-color);
}
}
}
.h10tskcx7-0-0-beta-42 {
@layer rdg.HeaderRow {
display: contents;
line-height: var(--rdg-header-row-height);
background-color: var(--rdg-header-background-color);
font-weight: bold;
& > .cj343x07-0-0-beta-42 {
/* Should have a higher value than 1 to show up above regular cells and the focus sink */
z-index: 2;
position: sticky;
}
& > .csofj7r7-0-0-beta-42 {
z-index: 3;
}
}
}
.c6ra8a37-0-0-beta-42 {
@layer rdg.Cell {
background-color: #ccccff;
}
}
.cq910m07-0-0-beta-42 {
@layer rdg.Cell {
background-color: #ccccff;
&.c6ra8a37-0-0-beta-42 {
background-color: #9999ff;
}
}
}
.a3ejtar7-0-0-beta-42 {
@layer rdg.SortIcon {
fill: currentColor;
> path {
transition: d 0.1s;
}
}
}
.rnvodz57-0-0-beta-42 {
@layer rdg.Defaults {
*,
*::before,
*::after {
box-sizing: inherit;
}
}
@layer rdg.Root {
--rdg-color: #000; --rdg-border-color: #ddd; --rdg-summary-border-color: #aaa; --rdg-background-color: hsl(0deg 0% 100%); --rdg-header-background-color: hsl(0deg 0% 97.5%); --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%); --rdg-row-hover-background-color: hsl(0deg 0% 96%); --rdg-row-selected-background-color: hsl(207deg 76% 92%); --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%); --rdg-checkbox-color: hsl(207deg 100% 29%); --rdg-checkbox-focus-color: hsl(207deg 100% 69%); --rdg-checkbox-disabled-border-color: #ccc; --rdg-checkbox-disabled-background-color: #ddd;
--rdg-selection-color: #66afe9;
--rdg-font-size: 14px;
display: grid;
color-scheme: var(--rdg-color-scheme, light dark);
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
/* We set a stacking context so internal elements don't render on top of external elements. */
/* size containment is not used as it could break "width: min-content" for example, and the grid would infinitely resize on Chromium browsers */
contain: content;
content-visibility: auto;
block-size: 350px;
border: 1px solid var(--rdg-border-color);
box-sizing: border-box;
overflow: auto;
background-color: var(--rdg-background-color);
color: var(--rdg-color);
font-size: var(--rdg-font-size);
/* needed on Firefox to fix scrollbars */
&::before {
content: '';
grid-column: 1/-1;
grid-row: 1/-1;
}
&.rdg-dark {
--rdg-color-scheme: dark;
--rdg-color: #ddd; --rdg-border-color: #444; --rdg-summary-border-color: #555; --rdg-background-color: hsl(0deg 0% 13%); --rdg-header-background-color: hsl(0deg 0% 10.5%); --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%); --rdg-row-hover-background-color: hsl(0deg 0% 9%); --rdg-row-selected-background-color: hsl(207deg 76% 42%); --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%); --rdg-checkbox-color: hsl(207deg 100% 79%); --rdg-checkbox-focus-color: hsl(207deg 100% 89%); --rdg-checkbox-disabled-border-color: #000; --rdg-checkbox-disabled-background-color: #333;
}
&.rdg-light {
--rdg-color-scheme: light;
}
@media (prefers-color-scheme: dark) {
&:not(.rdg-light) {
--rdg-color: #ddd; --rdg-border-color: #444; --rdg-summary-border-color: #555; --rdg-background-color: hsl(0deg 0% 13%); --rdg-header-background-color: hsl(0deg 0% 10.5%); --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%); --rdg-row-hover-background-color: hsl(0deg 0% 9%); --rdg-row-selected-background-color: hsl(207deg 76% 42%); --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%); --rdg-checkbox-color: hsl(207deg 100% 79%); --rdg-checkbox-focus-color: hsl(207deg 100% 89%); --rdg-checkbox-disabled-border-color: #000; --rdg-checkbox-disabled-background-color: #333;
}
}
}
}
.vlqv91k7-0-0-beta-42 {
@layer rdg.Root {
user-select: none;
& .r1upfr807-0-0-beta-42 {
cursor: move;
}
}
}
.f1lsfrzw7-0-0-beta-42 {
@layer rdg.FocusSink {
grid-column: 1/-1;
pointer-events: none;
/* Should have a higher value than 1 to show up above regular frozen cells */
z-index: 1;
}
}
.f1cte0lg7-0-0-beta-42 {
@layer rdg.FocusSink {
/* Should have a higher value than 3 to show up above header and summary rows */
z-index: 3;
}
}
.s8wc6fl7-0-0-beta-42 {
@layer rdg.SummaryCell {
inset-block-start: var(--rdg-summary-row-top);
inset-block-end: var(--rdg-summary-row-bottom);
}
}
.skuhp557-0-0-beta-42 {
@layer rdg.SummaryRow {
line-height: var(--rdg-summary-row-height);
> .cj343x07-0-0-beta-42 {
position: sticky;
}
}
}
.tf8l5ub7-0-0-beta-42 {
@layer rdg.SummaryRow {
> .cj343x07-0-0-beta-42 {
z-index: 2;
}
> .csofj7r7-0-0-beta-42 {
z-index: 3;
}
}
}
.tb9ughf7-0-0-beta-42 {
@layer rdg.SummaryRow {
> .cj343x07-0-0-beta-42 {
border-block-end: 2px solid var(--rdg-summary-border-color);
}
}
}
.b1yssfnt7-0-0-beta-42 {
@layer rdg.SummaryRow {
> .cj343x07-0-0-beta-42 {
border-block-start: 2px solid var(--rdg-summary-border-color);
}
}
}
.g1yxluv37-0-0-beta-42 {
@layer rdg.GroupedRow {
&:not([aria-selected='true']) {
background-color: var(--rdg-header-background-color);
}
> .cj343x07-0-0-beta-42:not(:last-child):not(.ch2wcw87-0-0-beta-42) {
border-inline-end: none;
}
}
}
.t7vyx3i7-0-0-beta-42 {
@layer rdg.TextEditor {
appearance: none;
box-sizing: border-box;
inline-size: 100%;
block-size: 100%;
padding-block: 0;
padding-inline: 6px;
border: 2px solid #ccc;
vertical-align: top;
color: var(--rdg-color);
background-color: var(--rdg-background-color);
font-family: inherit;
font-size: var(--rdg-font-size);
&:focus {
border-color: var(--rdg-selection-color);
outline: none;
}
&::placeholder {
color: #999;
opacity: 1;
}
}
}Perhaps this is a issue with the RDG version not nextjs?
from react-data-grid.
arvindbr95
commented on September 28, 2024
@softmarshmallow thank you this worked!
from react-data-grid.
softmarshmallow
commented on September 28, 2024
Update. It works on production build, but randomly fails when deployed (don't know why)
from react-data-grid.
Aluisio
commented on September 28, 2024
For me this solution stopped working after updating the library to version v7.0.0-beta.44
from react-data-grid.
Aluisio
commented on September 28, 2024
After testing further, I identified that the problem started with version 7.0.0-beta.42, where the styles were modified this topic. I'm using next 14.2.3 with pages folder and styled components. I also tested with app folder and tailwind and the problem persists.
from react-data-grid.
softmarshmallow
commented on September 28, 2024
Bumping nextjs from 14.1.1 -> 14.2.3 (latest at the moment) solved the issue, along with my previous comment #3460 (comment)
from react-data-grid.
Aluisio
commented on September 28, 2024
@softmarshmallow My test was using version 14.2.3, and I still have the problem
from react-data-grid.
softmarshmallow
commented on September 28, 2024
Sorry to confuse you guys. It seems to be related to nextjs build system, and for me, this only happens when deployed. local build always works fine. for even production deployment, it randomly works for certain build. (but 95% does not)
from react-data-grid.
softmarshmallow
commented on September 28, 2024
Can we get some attention from the team 🥺 @nstepien
from react-data-grid.
Phucthuhigh
commented on September 28, 2024
hmm this solution worked for me. But the resizable still has some bugs (idk why)
from react-data-grid.
softmarshmallow
commented on September 28, 2024
Checking this thread on daily basis. It really bugs me. I managed to work with some breaking styles with custom css, but unresolved problem is, that the selected cell won't hightlight (no border) on production (deployment) (it actually works fine on local production)
from react-data-grid.
mooyeon-choi
commented on September 28, 2024
In Next.js version 14.2.5, the CSS properties using @layer are being overridden by subsequently written properties.
Due to this issue, bugs occur when applying resizable, draggable, or sortable properties, but since I'm not familiar with CSS @layer, I'm not sure if this is the intended behavior.
from react-data-grid.
itsdapi
commented on September 28, 2024
Disable the resizeable, raggable solve the header issues. But the editable cell style still crash.
I noticed that the edit cell does not have width and mis placement
from react-data-grid.
Related Issues (20)
- How can we use the original editOnClick API or implement similar functionality with an existing version? HOT 1
- Columns are sorted when clicking header filters HOT 1
- Error encountered when decreasing the number of columns using a filter
- Grouped column header does not freeze when scrolling horizontally
- Columns are sorted when space key is down during typing in filters HOT 2
- Rows not rendering in production HOT 1
- Can react-data-grid-addons be released for react 18 !! HOT 2
- Master Detail row height management with divs HOT 1
- @layer compatibility issues HOT 4
- An absolute element inside the grid header cannot extend outside the grid.
- Module parse failed: Unexpected token HOT 1
- When clicking on the table header, onSelectedCellChange is called with row as undefined HOT 1
- ResizeObserver loop completed with undelivered notifications. when reducing the browser width HOT 2
- ResizeObserver loop completed with undelivered notifications. when reducing the browser width HOT 7
- `onColumnsReorder` not triggering on NextJS HOT 11
- UI jitters after initial load using Next.js HOT 3
- Request to be able to cache to row object from custom renderCell component
- `Error: useRowSelection must be used within DataGrid cells` bunping `7.0.0-beta.44` => `7.0.0-beta.47`
- expose `indeterminate` in ts typings for `RenderCheckboxProps` HOT 1
- expose `useHeaderRowSelection` for d.ts & bundle HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-data-grid.