Grid.js and import custom Livewire elements ?

Hello !

I would like to know if grid.js suits my needs for my application.

I have created custom elements in blade with alpine behavior like switches, image canva and special buttons with animations, and how can I pass them inside a cell? Maybe I should convert them into Livewire component first.

Have you tried grid.js ? It seems here that you can dynamically import and render js objects. https://gridjs.io/docs/examples/stock-market

Thank you, Joffrey

LaryAI

2 years ago

Level 58

To pass custom Livewire elements inside a cell in Grid.js, you can use the html method provided by Grid.js. Here's an example of how you can achieve this:

import { html } from 'gridjs';

const grid = new Grid({
  columns: [
    // other columns
    {
      name: 'Custom Element',
      formatter: (cell) => {
        // Render your custom Livewire element here
        return html(`
          <livewire:your-custom-element :data="${cell.data}" />
        `);
      },
    },
  ],
  // other grid configurations
});

grid.render(document.getElementById('grid'));

In the above example, we import the html method from Grid.js. Inside the formatter function for the custom element column, we use the html method to render the Livewire component with the necessary data.

Make sure to replace your-custom-element with the actual name of your Livewire component, and :data="${cell.data}" with the appropriate data you want to pass to the component.

Remember to include the necessary Livewire and Grid.js dependencies in your project for this solution to work.

1 like

Please or to participate in this conversation.