grid-js / gridjs-react Goto Github PK

View Code? Open in Web Editor NEW

47.0 47.0 12.0 831 KB

React component for Grid.js

Home Page: https://gridjs.io/docs/integrations/react

License: MIT License

TypeScript 69.97% JavaScript 30.03%

gridjs-react's People

Contributors

Stargazers

Watchers

Forkers

forkkit jellydn naterkane tdkn ronodip-basak webankietadev qualityreact fpaz ryandowd montugroup punit1108 kyleplump

gridjs-react's Issues

React component not rendered correctly at table header

Describe the bug
I'm trying to render a react component at table header, not table cells.
It seems impossible

import { _ } from "gridjs-react";
const tableColumns = [
    {id: 'id', name: _(<button className={"py-2 px-4 border rounded-md text-white bg-blue-600"} onClick={() => alert('clicked!')}>Edit</button>)},
    {id: 'name', name: 'Name'},
]

<Grid
          columns={tableColumns}
          data=[[1,"hoge"], [2, "hoge"]
/>

this render only

<button class="py-2 px-4 border rounded-md text-white bg-blue-600">Edit</button>

There isn't onClick

If possible, I want to put some react component at header .
My use-case is "Select All button"

Error when using _ function to render react component in cell formatter

Describe the bug
A clear and concise description of what the bug is.

Additional context
When loading a page that contains Grid component in react (v.18) atm error is displayed in console
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17

I have tried to remove call to _() and error is gone.
_() is used to render additional buttons in the very last right-hand side column.

Can't figure out how to use rowClick and cellClick events with this React adapter

Is your feature request related to a problem? Please describe.
I can't use the rowClick and cellClick events with this adapter

Describe the solution you'd like
The best will be to update the react adapter doc to add an example on using these events

Describe alternatives you've considered
I tried :

<Grid .... rowClick={(...args)=>console.log(args)} />`

and

<Grid .... onRowClick={(...args)=>console.log(args)} />

I'm currently exploring the source code to figure out the way to do this

Additional context
None.

Could we publish a 4.0.1 to fix the console logging?

Just a friendly ping that #320 is staged to go out, but hasn't been released yet. Could we get it released in a 4.0.1 patch?

Table fully redrawing on column changed

Descriprion of the bug
I have a sign with a "select row" checkbox. After I click on the checkbox id of this row (which is stored in the cell with index 2) is added to my side. Actually, everything works as it should, however, when the checkbox state changes from checked = {true} to checked = {false} or vice versa, the table is completely redrawn and throws us to the very beginning. That is, if we have scrolled a little and clicked on "select a row", then we will be sent to the top of the table and it will be completely redrawn. Also in the table there is a column with images and, accordingly, they are constantly being rerendered, which leads to unnecessary http requests and frequent animation of the image "loading". Most likely the problem is in the wrong keys for the components in the plugin. Please fix this bug.

Desktop :

OS: Windows
Browser chrome
Version 91.0.4472.124 (Official), (64 bit)

Error - ReactDOM.render is no longer supported in React 18, when using _

Describe the bug
When i try to create a custom Component in react using the _ function, the following error appears -

app-index.js:31 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

To Reproduce
Steps to reproduce the behavior:

Add a custom component like so -

const columns = [{
  name: 'Status',
  id: 'status',
  formatter: (cell: any) => _(<StatusBadge status={cell} />)
}, {
  name: 'Frequency',
  id: 'recurring'
}]

Expected behavior
The library should be compatible with React 18

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: MacOS 14
Browser chrome, edge
Version 118

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

Please update to use React v18

Is your feature request related to a problem? Please describe.
ReactDOM.render() is no longer supported by v18.* and any apps that do not use the new method of createRoot will be forced to run as though it is using React v17 -- gridjs-react also fails to install unless you use --force.

Describe the solution you'd like
Update to use React v18.*

Crash with l.createRoot is not a function when using formatter with server option

Describe the bug
I am trying to use formatter in React and are facing an issue even with the simple example from your documentation. The page crashes with this error:

l.createRoot is not a function

My main goal is to use Link from react router and make the cell clickable. But I can't even make a simple example working.

To Reproduce
We are not 100% sure but we think the error is only happening when using with the server option but we didn't have time to create a minimal reproducible example.

Example of the props we passed to Grid component.

columns = {[{id: "id", name: "Actions", formatter: cell => _(<i>{cell}</i>) }]}
server={{
                  url: "/myapi",
                  then: data => data.rows,
                  total: data => data.count,
                }}

Any ideas?
Thanks!

Expected behavior
The page shouldn't crash and we should see our custom component.

Desktop (please complete the following information):

OS: Ubuntu
Browser: Safari
Version: gridjs": "^5.1.0", "gridjs-react": "^5.1.0",

Formatter: breaks other instances of grid ?

Hi,
I have multiple grid instances in different components in my application (thanks for the amazing grid btw!). When I include a formatter to change the font color based on +/- in one of the grids.

It also breaks the other grid instances. They all go into the state Loading... and I don't see any errors on the console.

Commenting the formatter makes all the grids work.

The grids all update based on a state but they all have different data from different sources.

I had an error saying column id may be missing when I changed the formatter from (cell) to (cell, row) but that did not make any sense. Am I missing something obvious ?
Thanks a lot.

          {
             name: "%",
             formatter: (cell) => {
               return _(
                 <b style={{ color: cell > 0 ? "green" : "red" }}>{cell}</b>
               );
             }
          }

Issue with GridJs react rerendering after a change in form elements

Hello

I'm having issues with the component in reactjs. I'm using this grid to display some information from a database. The grid is below some form elements like input, select etc. Whenever I type or change data in any of the form elements, the grid gets rerendered.

I think it might be an issue with the component since I removed all props so there'd be no state change but the same issue occurred. Can you please help out?

There should be an onSelect or onReady prop for the grid component.

If there was a prop to handle the selection on ready event as mentioned here:
https://gridjs.io/docs/examples/selection-events

That'd make my life pretty easy, otherwise I don't know how to use the on ready event.

Something like so:

foo = () = {
//do stuff
}

Keep pagination page number and sorting order after setData

I'd like to keep the pagination page number and sorting order after setData.

You can reproduce resetting the page and sorting here:
https://codesandbox.io/s/gridjs-react-update-state-forked-qot36?file=/src/App.js

I guess it's not only removing row but also changing status inside the table because it also needs to call setData or something like that.

React component in front of the search bar

As shown in the picture below, I'd like to:

Use the "Add record" button directly in front of the search bar.
Use an icon (<i className="fa fa-search"/>) in the search placeholder.

Use Link from react router in a cell

Describe the bug
I am using react router and want to use a column formatter so that the user can click on the link within the cell and be guided to a detail page.

To Reproduce
Here is the column formatter i wanted to use:

import { Link } from "react-router-dom";

const linkFormatter = (cell, row) =>
    _(
      <Link to={`/jobs/${row.cells[1].data}`} className="font-bold">
        {cell}
      </Link>
    );

I get the following error:
Error: Invariant failed: You should not use <Link> outside a <Router>

Expected behavior
Is there a way to make work inside gridjs? Or maybe a workaround? I've tried using a regular <a href="..." /> tag, which works, but I don't want to re-render the entire page. Many thanks!

SyntaxError: Named export 'Grid' not found. The requested module 'gridjs-react' is a CommonJS module, which may not support all module.exports as named exports.

When running SSR server (inertia/react/laravel)

php artisan inertia:start-ssr

It throws the exception:

import { Grid } from "gridjs-react";
         ^^^^
SyntaxError: Named export 'Grid' not found. The requested module 'gridjs-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'gridjs-react';
const { Grid } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:331:24)
    at async loadESM (node:internal/process/esm_loader:88:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)

Node.js v17.2.0

It builds fine and works client side with no issues however with SSR the above comes up.

Using the suggested:

import pkg from 'gridjs-react';
const { Grid } = pkg;

Does not work either.

My package.json file:

{ "private": true, "scripts": { "dev": "vite", "build": "vite build && vite build --ssr" }, "devDependencies": { "@headlessui/react": "^1.4.2", "@inertiajs/react": "^1.0.0", "@tailwindcss/forms": "^0.5.3", "@vitejs/plugin-react": "^3.0.0", "autoprefixer": "^10.4.13", "axios": "^1.1.2", "laravel-vite-plugin": "^0.7.2", "postcss": "^8.4.21", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwindcss": "^3.2.7", "vite": "^4.0.0" }, "dependencies": { "date-fns": "^2.29.3", "gridjs": "^6.0.6", "gridjs-react": "^6.0.1", "react-icons": "^4.8.0", "react-no-ssr": "^1.1.0" } }

resizable is not working in 5.1.0 verison

using react 18 and above you can't use last versions of gridjs and gridjs-react , because of reactDom issue (ReactDOM.render is no longer supported in React 18. Use createRoot instead) , in older vesion of grid js resizable is working well , but in last version (5.1.0) it just show to resizing arrow without any resizing achived !

Grid component with JSON data

Describe the bug
Trying to instantiate a grid component with JSON seems to produce unexpected results.
Passing an array of objects does not behave as expected whereas passing an array of arrays as (in the react example) seems to work okay.

To Reproduce

 <Grid
        data={[{foo: "2020-11-24T08:48:44Z", bar: false, baz: "mysql"}, {foo: "2020-11-24T08:48:44Z", bar: false, baz: "mysql"}]}
        columns={["foo", "bar", "baz"]}
        sort
      />

Expected behavior
passing a JSON blob behaves as the normal grid.js (sans react) does.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: OSX
Browser: chrome
Version

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

gridjs-mermaid loading issue

Hi,

I am getting lot of not found file or directory while importing gridjs-mermaid

Compiled with warnings.

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/button.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/button.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/checkbox.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/checkbox.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/colors.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/colors.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/container.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/container.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/footer.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/footer.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/head.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/head.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/input.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/input.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/loadingBar.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/loadingBar.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/pagination.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/pagination.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/resizable.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/resizable.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/search.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/search.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/shadow.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/shadow.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/sort.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/sort.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/table.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/table.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tbody.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tbody.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/td.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/td.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/th.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/th.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/thead.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/thead.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tr.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tr.scss'

Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/wrapper.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/wrapper.scss'

[eslint] 
src/App.js
  Line 20:18:  'Gridjs' is defined but never used             no-unused-vars
  Line 26:10:  'devTable' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/button.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/button.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/checkbox.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/checkbox.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/colors.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/colors.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/container.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/container.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/footer.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/footer.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/head.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/head.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/input.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/input.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/loadingBar.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/loadingBar.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/pagination.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/pagination.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/resizable.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/resizable.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/search.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/search.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/shadow.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/shadow.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/sort.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/sort.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/table.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/table.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tbody.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tbody.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/td.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/td.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/th.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/th.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/thead.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/thead.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tr.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/tr.scss'

WARNING in ./node_modules/gridjs/dist/theme/mermaid.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/gridjs/dist/theme/mermaid.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/wrapper.scss' file: Error: ENOENT: no such file or directory, open '/home/mhanuel/devel/React/bd-app/node_modules/gridjs/src/theme/mermaid/wrapper.scss'

I have installed using npm as instructions, I also tried using yarn.
In my App.js I am using

import "gridjs/dist/theme/mermaid.css";

What am I doing wrong?

Add example on how to access underlying Grid instance from the React Component

Hey @afshinm, It would be nice to add an example to the readme showing how to access the underlying Grid instance from the React Component (i.e. for adding a row click listener). It took me a while to figure out how to do this but here is the solution that I came up with:

import React, { useEffect, useRef } from 'react';
import { Grid } from "gridjs-react";

export const exampleComponent = () => {

    const gridRef = useRef(null);

    useEffect(() => {
        if(gridRef.current){
            // get the gridjs Grid instance from the ref
            const currentGrid = gridRef.current.getInstance();
            // add event listener to the Grid to listen for row clicks
            currentGrid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args));
        }
    })

    return(
        <div>
        <Grid
        ref={gridRef}
        data={[
          ['John', '[email protected]'],
          ['Mike', '[email protected]']
        ]}
        columns={['Name', 'Email']}
        search={true}
        pagination={{
          enabled: true,
          limit: 1,
        }}
      />
        </div>

    )
}

Is the above method the way you would recommend doing this?

Sorting by React Component

Bug description
Cannot sort if column data is a React Component.

To Reproduce

import { Grid, _ } from 'gridjs-react';

const tableData = [
  ['John', 12345, _(<span>myText1</span>)],
  ['Mike', 67891, _(<span>myText2</span>)],
]

export default function myCustomGrid() {
  return (
    <Grid
      sort
      columns={['Name', 'Phone', 'Custom Component']}
      data={tableData}
      pagination={{
        enabled: true,
        limit: 5,
      }}
    />
  );
}

Expected behavior
Table sorted by the "Custom Component" column.

Error RN 17.0.1

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/gridjs-react
npm ERR! gridjs-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

[ERROR]: The container element [object HTMLDivElement] is not empty.

No matter if I use the gridjs react variant or include it differently, the error
[ERROR]: The container element [object HTMLDivElement] is not empty. Make sure the container is empty and call render() again
always appears.

Also the options with force render and update have made no change.

The error has no consequences.

Short code snippet how I use it
data=[{ id='123' }, { id='456' },...]
<Grid data={data} columns={[{ name: 'ID' },...]} sort="true" className={{ sort: 'btn--sort' }} />

In the columns object I use the formater and _ to display some additional HTML in one column.
{name: 'Status', formatter: (cell, row) => _( <div className="container--flex-left"> <div className={'has-status ${getStatusColor(cell)}'}> <i className={'icon icon-${getStatusIcon(cell)}'} /> </div> ... </div> ), },

Versions
react: 18.2.0
gridjs: 5.1.0
gridjs-react: 5.1.0

React components which use a Context Provider breaks GridJS

Describe the bug
When we try to pass a custom React component to the _() function, and if that component uses some session provider (in my case its a react-query Provider for the QueryClient), gridjs fails with warning.

To Reproduce
Steps to reproduce the behavior:

Create a react component that works (and make sure you use some sort of Context Provider at the app level, and use something provided by it inside this component)
Load the component inside a GridJS cell using _()

Expected behavior
The React component that uses Context Providers should work well in the cell.

Screenshots

Desktop:

OS: Ubuntu 22.04
Browser: Chrome
Version: 109.0.5414.119

Ability to display React components in a Plugin

The goal is to be able to display React components in a Plugin. For example: a button with an inline SVG is not possible at the moment. The only alternative is to use renderToStaticMarkup, but then one would lose access to the DOM events.

Current alternative with renderToStaticMarkup

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.