Skip to content

Heading formatting and cell edit issues with production build #3623

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paladin0 opened this issue Oct 22, 2024 · 15 comments
Open

Heading formatting and cell edit issues with production build #3623

paladin0 opened this issue Oct 22, 2024 · 15 comments
Labels

Comments

@paladin0
Copy link

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

image
image

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 paladin0 added the Bug label Oct 22, 2024
@paladin0
Copy link
Author

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
Copy link
Contributor

Is the css bundled correctly? We are using css layers

@mikhael28
Copy link

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
Copy link
Author

@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
Copy link
Contributor

Seems related #3460

@mikhael28
Copy link

@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
Copy link

Chapre commented Jan 1, 2025

Please someone help solve this issue

@Akbar1909
Copy link

any news

@vloax
Copy link

vloax commented Jan 14, 2025

problem persists, any update?

@mikkelking
Copy link

@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
Copy link
Author

@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
Copy link

mikhael28 commented Mar 11, 2025

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
Copy link
Contributor

#3623 (comment)

@xman2310
Copy link

xman2310 commented Apr 23, 2025

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.

@lukicenturi
Copy link

lukicenturi commented May 1, 2025

#3623 (comment)

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

9 participants