tui.grid icon indicating copy to clipboard operation
tui.grid copied to clipboard

Styles are not loaded with Vite + npm

Open ClayenKitten opened this issue 1 year ago • 0 comments

Describe the bug When used with simple vanilla Vite template, Grid successfully loads, but without stylesheet. Displayed grid has default browser styles, which make it unusable: huge empty space above, clipboard displayed as input, etc.

It differs from behavior of ag-grid and other competitors, so I believe not an intended behavior.

To Reproduce Steps to reproduce the behavior:

  1. Run npm create vite@latest
  2. Choose "Vanilla" option and create project
  3. Run npm install --save tui to add dependency
  4. Run npm install to install all other required packages
  5. Add basic grid example into src/main.ts and index.html
  6. Run npm run dev and go to localhost:5173

Expected behavior Grid loads with correct stylesheet as shown in examples.

Screenshots image

Desktop

  • OS: pop!_OS 22.04 LTS
  • Browser: Firefox 118.0.2 (64-bit)
  • Version: ^4.21.22

Additional context The temporary solution is to embed CDN version of stylesheet into the project in any way (<link/>, @import, embedding the file, etc). After that, everything seems to work as intended.

For easier reproduction of the issue I created the repository: https://github.com/ClayenKitten/test-tui-grid-css-issue

ClayenKitten avatar Jan 31 '24 16:01 ClayenKitten