SolidJS AG Grid Not Reactively Updating

Question

The code below should alter the heading name of the first column named "manufac", to "new2".

But it does not work - it is as if there is not reactivity with the store.

The console suggests the change has taken place.

Perhaps there is a simple oversight here?

Thanks in advance.

import AgGridSolid from 'ag-grid-solid';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css'; // grid core CSS
import "ag-grid-community/styles/ag-theme-balham.css"; // optional theme
import './gridStyles.css'
import { createSignal } from "solid-js";
import { createStore } from "solid-js/store";


function PageThree() {

    const [name, setName] = createSignal('start');
    
    const [columnDefs, setColumnDefs] = createStore([
        { field: 'make', headerName: 'manufac' },
        { field: 'model', headerName: 'carModel' },
        { field: 'price' },
    ]);

    const rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxster', price: 72000 },
      ];
    
     const fn_change1 = () =>  {console.log('change1  ') ; setName('new1')}
     const fn_change2 = () =>  {console.log('change2  ') ; setColumnDefs(0,'headerName','new2') ; console.log(columnDefs[0].headerName)}
   
    return (   
        <>
        <div>Hello {name()}!</div>
        <button onClick={fn_change1}>click1</button>
        <button onClick={fn_change2}>click2</button>
        <div class="ag-theme-balham" style={{ height: '100%' }}>
            <AgGridSolid
            columnDefs={columnDefs}
            rowData={rowData}
            />
        </div>
        </>
    )
  }
  
  export default PageThree

Answer 1

It appears AG Grid does not support solid stores. The reason could be due to how store works. Solid store relies on the Proxy API which brings certain limitations, for example, you can not track the whole store. Change the effect below in a way to track the store, you will see the effect is not triggered.

createEffect(() => console.log(rowData));

But you can track a property:

createEffect(() => console.log(rowData[0].price));

I updated your example to change the price rather than the heading to make it easier to observe the change:

import { Component, createEffect } from 'solid-js';
import { createSignal } from 'solid-js';
import { createStore } from 'solid-js/store';
import AgGridSolid from 'ag-grid-solid';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App: Component = () => {
  const columns = [
    { field: 'make', headerName: 'manufac' },
    { field: 'model', headerName: 'carModel' },
    { field: 'price', headerName: 'price' },
  ];

  const [rowData, setData] = createStore([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
  ]);

  const changePrice = () => {
    setData(0, 'price', (prev) => prev + 1);
  };

  createEffect(() => console.log(rowData[0].price));

  return (
    <>
      <button onClick={changePrice}>Change Price</button>
      <div class="ag-theme-balham" style={{ height: '100%' }}>
        <AgGridSolid columnDefs={columns} rowData={rowData} />
      </div>
    </>
  );
};

export default App;

Your best option is to use a signal as there is not a single example that uses solid-js/store:

https://github.com/ag-grid/ag-grid-solid-example

PS: If is best to use an effect to check if a value is updated.