Redraw Datatables for data that is being passed into columns.

ATNoblis

I'm currently working with React and where I'm creating a datatable passing a variable into columns such that a particular column is using this variable to do some calculations to be displayed. This variable gets updated throughout the application and I would like the datatable to be redrawn such that it handles the changes to this variable. I'm thinking maybe a useeffect would work but I'm not sure...
My current datatable Component

export default function DataTables({ data, handleRowSelect }) {
const tableRef = useRef();
const columnsData = useSelector((state) => state.status.ExpirationDate);
const onSelectRows = (e, dt, type, indexes) => {
   const selectedRows = dt.rows({ selected: true }).data().toArray();
   handleRowSelect(selectedRows);
};
return (
<DataTable
      id="datatable"
      data={data}
      className="display"
      columns={columns(columnsData)}
      ref={tableRef}
      options={{
        responsive: true,
        select: true,
        order: [],
      }}
      onSelect={onSelectRows}>
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
        </tr>
      </thead>
    </DataTable>)
}

allan

There currently isn't an option for the React component (or Vue, it has the same issue) to "watch" for changes on the confirmation options such as the columns. It does for the data, but not the other properties. That I think is a limitation that is going to need to be addressed. Thanks for flagging it up.

Allan