React-Table: Specify optional column (depending on result set availability)

Question

In React-Table I'm building out my table columns using useMemo as below,

// React-Table Columns
const columns = React.useMemo(
    () => [
        {
            Header: "requesterEmail",
            accessor: "requesterEmail",
            isVisible: true
        },
        {
            Header: "Date Submitted",
            accessor: "actionDate",
            isVisible: true
        },
  ...

The table is shared by multiple components, and some components may pass in a resultset containing additional columns. If available, I'd like to include those columns. I'd like to do something like

        /* The Frequency only applies in some cases, e.g. depending on prop, 
            or availability of accessor */ 
        {props.someprop === 'special' &&
            {
                Header: "Special Column",
                accessor: "specialColumn",
                isVisible: true             
            }
        },

or

/* Check availability of accessor? */ 
{specialColumn &&
    {
        Header: "Special Column",
        accessor: "specialColumn",
        isVisible: true             
    }
},

Is this possible?

Answer 1

Yes.You can do this by add props.someprop in the dependencies of useMemo.

const columns = React.useMemo(() => {
  const result = [
    {
      Header: "requesterEmail",
      accessor: "requesterEmail",
      isVisible: true,
    },
    {
      Header: "Date Submitted",
      accessor: "actionDate",
      isVisible: true,
    },
    ...
  ];
  if (props.someprop === "special") {
    result.push({
      Header: "Special Column",
      accessor: "specialColumn",
      isVisible: true,
    });
  }

  return result;
}, [preDependencies, props.someprop]);