Get Update whenever table changed

[encikpotato]

Hi, NextJS newbie here. i found this table is very impressive.

May i ask how to get udpate whenever i type inside in the table?

<ActiveTable
          onCellUpdate = {(cellUpdate) => { console.log(cellUpdate); }}
          pagination={true}
          displayAddNewColumn={false}
          columnDropdown={{displaySettings: {isAvailable: false}}}
          customColumnsSettings={[
            { "headerName": "Item", "cellStyle": {"backgroundColor": "#f8f8f8"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false },
            { "headerName": "Description", "cellStyle": {"width": "150px"}, "isHeaderTextEditable": false },
            { "headerName": "Quantity", "cellStyle": {"backgroundColor": "#fdfdfd"}, "defaultColumnTypeName": "number", "isHeaderTextEditable": false },
            { "headerName": "Material", "cellStyle": {"backgroundColor": "#f1f1f1"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false }
          ]}
          tableStyle={{borderRadius: "10px", width:"100%"}}
          content={content}
          headerStyles={{ default: { backgroundColor: "#d6d6d630" } }}
        />

i did try to update using onCellUpdate but no feedback in the console unfortunately.

[OvidijusParsiunas]

Hey, I just tested your code and it appears to work fine on my end.
May I ask if you ran this in CodeSandbox or some other hosted environment? As these can sometimes not produce expected console outputs.

Let me know more about your setup so I can try to help. Thanks!

[encikpotato]

Hi, thanks for reply very quick! Thanks to you now I relieze the console log happen in the browser and not in vs code terminal. I think this is because i did set page to render on client side.

my setup:
running on VSCode
npx create-next-app@latest

just a quick question, is possible to render on server render side? if possible it will be very great for user to fetch data from mongoDB.

[encikpotato]

New updates: I did data fetching on a page that implemented SSR, and then passed the parameter to another page containing active-table-react that implemented CSR. it works! I'll share the implementation and perhaps can include in the example for NextJS.

notes,
SSR: server side rendering
CSR: client side rendering

[OvidijusParsiunas]

That is great to hear!
To note, the content property needs to be set immediately when the table has rendered. I am happy this works for you, but if your data takes too long to load and the table has already been rendered, to update the table, you can use the updateStructure method.

[encikpotato]

Duly noted. I did async function so it will not render table until it complete fetching. Thanks alot for your active table and support!