gridjs-react icon indicating copy to clipboard operation
gridjs-react copied to clipboard

It doesn't work when adding a component with the _ function

Open Sleon4 opened this issue 10 months ago • 0 comments

Describe the bug It doesn't work when adding a component with the _ function.

To Reproduce Steps to reproduce the behavior:

  1. Add the components with their columns and values.
  2. View the result in the browser.

Expected behavior I was expecting the button type component to be added for each row.

Screenshots

Image

Image

Desktop (please complete the following information):

  • OS: Debian (In a Docker container)
  • Browser: Google chrome

Additional context I have read different sources and it still seems like everything is correct and yet it doesn't work.

This is my code:

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

export default function TableSuppliers() {
  return (
    <Grid
      fixedHeader={true}
      search={true}
      sort={true}
      autoWidth={true}
      pagination={{
        enabled: true,
        limit: 10,
      }}
      language={{
        search: {
          placeholder: "🔍 Buscar...",
        },
      }}
      columns={[
        "Nombre",
        "Razón Social",
        "Télefono",
        "Correo",
        "Dirección",
        "Actions",
      ]}
      server={{
        url: "/suppliers.json",
        then: (data) =>
          data.map((card) => [
            card.name,
            card.nit,
            card.phone,
            card.email,
            card.address,
            _(
              <button
                key={card.id}
                className={"py-2 px-4 border rounded-md text-white bg-blue-600"}
                onClick={() => console.log("Clicked")}
              >
                {"Edit"}
              </button>
            ),
          ]),
      }}
    />
  );
}

Data obtained from suppliers.json:

[
  {
    "id": 1,
    "name": "Proveedor 1",
    "nit": "0123456789",
    "phone": "+57 310 000 0000",
    "email": "[email protected]",
    "address": "123 Main St, Suba, Bogotá",
    "deleted_at": null
  },
  {
    "id": 2,
    "name": "Proveedor 2",
    "nit": "0123456789",
    "phone": "+57 310 000 0000",
    "email": "[email protected]",
    "address": "123 Main St, Sucre, Girardot",
    "deleted_at": null
  },
  {
    "id": 3,
    "name": "Proveedor 3",
    "nit": "0123456789",
    "phone": "+57 310 000 0000",
    "email": "[email protected]",
    "address": "123 Main St, Anytown, Ibagué",
    "deleted_at": "2025-01-01 08:00:00"
  }
]

Sleon4 avatar Mar 19 '25 21:03 Sleon4