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 #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]

#3623 (comment)

[xman2310]

Reference URL: #3463 (comment)

[ 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.