Cell formatter not working as expected.

[kttanwar]

I am trying to use formatter to change the way a column cells would be rendering. I need the cells to be showing "Current: {value}" but they are actually just showing {value} in the cells.

Code snippet

import DataGrid from 'react-data-grid'; const columns = [ { key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }, { key: 'complete', name: 'Complete', formatter: ({ value }) =>

Current: {value}

, }, ]; const rows = [ { id: 0, title: 'Task 1', complete: 20 }, { id: 1, title: 'Task 2', complete: 40 }, { id: 2, title: 'Task 3', complete: 60 }, ]; const Mycomp = () => { return <DataGrid columns={columns} rows={rows} />; }; export default Mycomp;

Output

Here is the screenshot of the output:

Expected behavior

The expected behaviour should be, for Complete column the values should be "Current: 20", "Current: 40" and "Current: 60".

Environment

• "react-data-grid": "^7.0.0-beta.34"
• "react": "^18.2.0"
• "react-dom": "^18.2.0"

[pwkurth]

I could be mistaken, but from when I use the formatter I do something like this.

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  {
    key: 'complete',
    name: 'Complete',
    formatter: ({ row }) => (
      <div>
        Current: {row.complete}
      </div>
    ),
  },
];

Where you would access the row object. Allowing you to add more potential styling to it or additional text (in your case)

[adarsh-drishya]

it is actually not working in my nextjs project. there is some thing wrong .it only does not work in nextjs i see or something with react 18, @nstepien @amanmahajan7 . this should be sev1, as it is not supported in nextjs people might consider moving to other libraries please look into it. I want to stay with this lib only `import React from "react"; import ReactDataGrid from "react-data-grid"; import { VisibilityOffOutlined } from "@mui/icons-material";

const columns = [ { key: "id", name: "ID" }, { key: "firstName", name: "First Name" }, { key: "lastName", name: "Last Name" }, { key: "visibility", name: "Visibility", formatter: ({ row }) => (

<VisibilityOffOutlined style={{ color: "green" }} /> {row?.visibility}test

), }, ];

const rows = [ { id: 1, firstName: "John", lastName: "Doe", visibility: "visible" }, { id: 2, firstName: "Jane", lastName: "Doe", visibility: "hidden" }, ];

function MyDataGrid() { return <ReactDataGrid columns={columns} rows={rows} minHeight={250} />; }

export default MyDataGrid; `

[amanmahajan7]

Can you create a reproducible example?

[amanmahajan7]

Closing due to inactivity