Heading formatting and cell edit issues with production build

[paladin0]

Production build using latest version results in the below Development build appears to be correct

This docker build works for dev with no issues FROM node:20-alpine3.19 ENV NODE_OPTIONS=--openssl-legacy-provider

add app

COPY --chown=1001:1001 app app

RUN addgroup -S -g 1001 python RUN adduser -D -S -G python -u 1001 python

WORKDIR /app COPY ./app/package.json /app RUN apk add git

RUN mkdir -p /home/react && chown -R 1001:1001 /home/react RUN yarn add react-app-rewired RUN yarn add stream-browserify RUN yarn add buffer RUN yarn add react-clear-browser-cache RUN npm install -g serve RUN node ./node_modules/react-clear-browser-cache/bin/cli.js RUN yarn install ENV NODE_OPTIONS="--max_old_space_size=4096 --openssl-legacy-provider"

start app

USER 1001:1001 CMD ["yarn", "run", "start"]

======================================================== this then results in the above images FROM node:20-alpine3.19 ENV NODE_OPTIONS=--openssl-legacy-provider

add app

COPY --chown=1001:1001 app app

RUN addgroup -S -g 1001 python RUN adduser -D -S -G python -u 1001 python

WORKDIR app RUN apk add git

RUN mkdir -p /home/react && chown -R 1001:1001 /home/react RUN yarn add react-app-rewired RUN yarn add stream-browserify RUN yarn add buffer RUN yarn add react-clear-browser-cache RUN npm install -g serve RUN node ./node_modules/react-clear-browser-cache/bin/cli.js RUN yarn install RUN yarn build

start app

USER 1001:1001 CMD ["serve", "-s", "build"]

[paladin0]

I should also add the following "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", )

and

"react-data-grid": "^7.0.0-beta.47",

[amanmahajan7]

Is the css bundled correctly? We are using css layers

[mikhael28]

I have the same issue, it only seems to affect the prod bundles that are generated - I'm using Next 14.2.x

My temporary fix is to update the styles.css in the npm module to comment out the inline-block: 10px in the code block below.

.r1y6ywlx7-0-0-beta-46 { @layer rdg.HeaderCell { cursor: col-resize; position: absolute; inset-block-start: 0; /* inset-inline-end: 0; inset-block-end: 0; inline-size: 10px; */ } }

This breaks width: max-content but at least my data table works in prod. @amanmahajan7 @paladin0

[paladin0]

@amanmahajan7 The above fix seems to work, but due to the way our live builds work we docker container everything and its fully rebuilt with each update, so i cant use that long term

Any ideas on how i can fix it as its killed most grids in our app

[amanmahajan7]

Seems related https://github.com/adazzle/react-data-grid/issues/3460

[mikhael28]

@paladin0 I would just take those styles, and copy them out of the node module and into a separate file that you import locally, to use them directly. Fixes the problem, no?

[Chapre]

Please someone help solve this issue

[Akbar1909]

any news

[vmelooo]

problem persists, any update?

[mikkelking]

@paladin0 I would just take those styles, and copy them out of the node module and into a separate file that you import locally, to use them directly. Fixes the problem, no?

This is a fix (to some degree), but the column resizing doesn't work, and the sort icon is in the wrong place now.

[paladin0]

@mikkelking in the past we have relied on the column resizing.

Pretty painful that these seem to be pretty significant issues and basic functionality that should have been tested?

We have tried the styles, but its not ideal

[mikhael28]

I’ve actually removed this component from my codebase, and built one from scratch. I’d post the code here but I’m on my iPad, only a couple hundred lines, though the performance on items over 50 is a bit sus. While I give open source maintainers a lot of grace, I think that this library probably needs to be a bit more maintained before it’s suitable for true production use.

[amanmahajan7]

https://github.com/adazzle/react-data-grid/issues/3623#issuecomment-2494841325

[xman2310]

Reference URL: https://github.com/adazzle/react-data-grid/issues/3463#issuecomment-2095388275

[ Summary ]

1. It is normal up to 7.0.0-beta.41, but the problem occurs from 7.0.0-beta.42.

2. Do not use the code below. import 'react-data-grid/lib/styles.css';

3. Instead, copy 'node_modules/react-data-grid/lib/styles.css' and paste it into 'public/styles.css', then insert the code below into index.html. <link rel="stylesheet" href="styles.css">

I solved it in the same way as above.

[lukicenturi]

https://github.com/adazzle/react-data-grid/issues/3623#issuecomment-2823887959

From all suggestions in the thread and the other thread, this is the only solution that works for me

[amanmahajan7]

Is this still an issue for anyone. Also https://github.com/adazzle/react-data-grid/issues/3623#issuecomment-2494841325?

[amanmahajan7]

Closing due to inactivity