column definitions dynamic build.

[jjwallaby]

Hi,
I understand the columns need to be in a useMemo or useState. However I have a case where the columns definitions are not static. They need to be built dynamically.

Example if you want to generate. muiEditTextFieldProps dynamically.

The problem is that initial the columns will be null until the columns are pre-processed and passed.

Obtain error
material-react-table/src/utils/column.utils.ts

column.utils.ts:23 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
at getLeafColumns (column.utils.ts:23:1)
at getAllLeafColumnDefs (column.utils.ts:31:1)
at getDefaultColumnOrderIds (displayColumn.utils.ts:126:1)
at useMRT_TableInstance.ts:60:1
at mountMemo (react-dom.development.js:17225:1)
at Object.useMemo (react-dom.development.js:17670:1)
at useMemo (react.development.js:1650:1)
at useMRT_TableInstance (useMRT_TableInstance.ts:58:1)
at useMaterialReactTable (useMaterialReactTable.ts:9:1)
at Example (TableMainExample2.jsx:212:1)

import { type Row } from '@tanstack/react-table';
import {
type MRT_Column,
type MRT_ColumnDef,
type MRT_ColumnOrderState,
type MRT_DefinedColumnDef,
type MRT_DefinedTableOptions,
type MRT_FilterOption,
type MRT_RowData,
type MRT_TableInstance,
} from '../types';

export const getColumnId = (
columnDef: MRT_ColumnDef,
): string =>
columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;

export const getAllLeafColumnDefs = (
columns: MRT_ColumnDef[],
): MRT_ColumnDef[] => {
const allLeafColumnDefs: MRT_ColumnDef[] = [];
const getLeafColumns = (cols: MRT_ColumnDef[]) => {
cols.forEach((col) => {
if (col.columns) {
getLeafColumns(col.columns);
} else {
allLeafColumnDefs.push(col);
}
});
};

How to work around this issue ?

[KevinVandy]

Use a proper dependency array in your useMemo, or don't memoize the columns. Make sure to provide an empty fallback array while loading.
There's also an official example for this: https://www.material-react-table.com/docs/examples/dynamic-columns

[jjwallaby]

Thanks very much Kevin. I will try that example but I still see hard-coded array for columnNames.
which also be dynamically assigned.

Therefore the below is pre-defined - works. but if columnNames is also set dynamically run into issues.

//create columns from data
const columns = useMemo(
() =>
data.length
? Object.keys(data[0]).map((columnId) => ({
header: columnNames[columnId] ?? columnId,
accessorKey: columnId,
id: columnId,
}))
: [],
[data],
);

to this as orgCols is now a useState and columns populated by backend.

const columns = useMemo(
() =>
data.length
? Object.keys(data[0]).map((columnId) => ({
header: orgCols[columnId] ?? columnId,
accessorKey: columnId,
id: columnId,
}))
: [],
[orgCols,data],
);

Since useMaterialReactTable is a hook it needs columns and data pre-populated.

Hence struggle with how to handle dynamic setting of columns.
so even if you move the MaterialTable to another lower child level.

Than struggle with setting other
column parameters dynamically for muiEditTextFieldProps like :-

error
helperText

I really trying to grasp this library and the implication dependencies.

[jjwallaby]

That seems to work okay now even if initial columns is empty.

const columns = useMemo(
() =>
orgCols
? Object.keys(orgCols).map((columnId) => ({
header: orgCols[columnId] ?? columnId,
accessorKey: columnId,
id: columnId,
}))
: [],
[data,orgCols,validationErrors],
);

However I not been able to handle the dynamic fields for muiEditTextFieldProps like :-

error
helperText

Example : CRUD:

{
    accessorKey: 'email',
    header: 'Email',
    muiEditTextFieldProps: {
      type: 'email',
      required: true,
      error: !!validationErrors?.email,
      helperText: validationErrors?.email,
      //remove any previous validation errors when user focuses on the input
      onFocus: () =>
        setValidationErrors({
          ...validationErrors,
          email: undefined,
        }),
    },
  },

To : validateColFieldCheck and validateColField are helper functions. to return boolean and string respectively.
but i think they are been set to undefiend.

                  **muiEditTextFieldProps: {

              error:   validateColFieldCheck(columnId,validationErrors),
              helperText:  validateColField(columnId,validationErrors),**

              required: true,
              type: 'string',  

/*

• @returns {string}
  */
  export function validateColFieldCheck(field_name,j_fields) {
  if ( j_fields.hasOwnProperty(field_name)) {
  if ( j_fields[field_name].length > 2 ) {
  console.log("validateColFieldCheck IS ERROR ........",field_name,j_fields[field_name]);
  return(true);
  } else {
  console.log("validateColFieldCheck NO ERROR ........",field_name,j_fields[field_name]);
  return(false);
  }
  }

  console.log("validateColFieldCheck NO INFO ........",field_name,j_fields);
  return(false);

}
export function validateColField(field_name,j_fields) {

console.log("info validateColField:",field_name);
console.log("info validateColField:",j_fields);
console.log("info validateColField actual:",j_fields[field_name]);

let value=j_fields[field_name];
console.log(typeof value);
return(value);

}

[jjwallaby]

Finally works. - when empty it does produce empty array...

This is just an example. forcing fields edited to be in error...

const columns = useMemo(
() =>
orgCols
? Object.keys(orgCols).map((columnId) => ({
header: orgCols[columnId] ?? columnId,
accessorKey: columnId,
id: columnId,
muiEditTextFieldProps: {

              error:   validateColFieldCheck(columnId,validationErrors),
              helperText:  validationErrors[columnId],

              required: true,
              type: 'string',
              onChange: (event) => {
                const value = event.target.value;

                //validation logic
                let j_json={}
                j_json[columnId]="";
                if (!value) {
                    let prev=validationErrors;
                    let arrkeys=Object.keys(prev);
                    let tot=arrkeys.length;
                    let newValids={};
                    for(let no=0;no<tot;no++) {
                         let curr_field=arrkeys[no];
                         let j_curr={}
                         newValids[curr_field]=prev[curr_field]

                    };
                    let j_new={}
                    newValids[columnId]="";


                    setValidationErrors(newValids);

                } else {
                    let status = "ERROR"

                    let j_json_cond={}
                    j_json_cond[columnId]="some error";
                    if ( status != "OKAY" ) {
                        let prev=validationErrors;
                        console.log("ValidationErrors:",prev);
                        let arrkeys=Object.keys(prev);
                        let tot=arrkeys.length;
                        let newValids={};
                        for(let no=0;no<tot;no++) {
                             let curr_field=arrkeys[no];
                             let j_curr={}
                             newValids[curr_field]=prev[curr_field]

                        };
                        let j_new={}
                        newValids[columnId]=j_json_cond[columnId];
                        setValidationErrors(newValids);
                    } else {
                        delete validationErrors[columnId];
                        setValidationErrors({ ...validationErrors });
                    }
                };
      },
    },
  }))
    : [],
[data,orgCols,validationErrors],

);

MUCH Appreciated.

[jjwallaby]

Thanks again. works. I am not sure if it is the best approach. but i need to modify the Edit functionality. muiEditTextFieldProps dynamically.