title: material-table lookup. How do I get the selected value?
body: <p>I am using material-table to render my data and I am dynamically building lookup</p>
  <p>I want to add another lookup column to my table if a certain value is selected from the first lookup</p>
  <pre><code>const [state, setState] = useState&lt;TableState&gt;({
    columns: [
      {
        title: 'Name',
        field: 'name',
        editComponent: (tableData) =&gt; {
          return &lt;Input autoFocus={true} onChange={(e) =&gt; tableData.onChange(e.target.value)} /&gt;;
        }
      },
      {
        title: 'Type', field: 'type_id', initialEditValue: 1, editable: 'onAdd',
        lookup: columnTypes,
  
      }
    ],
    data: []
  });
  </code></pre>
  <p>then I would want to add another item to make the tablestate look like this if they chose alignment from the first lookup</p>
  <pre><code>const [state, setState] = useState&lt;TableState&gt;({
        columns: [
          {
            title: 'Name',
            field: 'name',
            editComponent: (tableData) =&gt; {
              return &lt;Input autoFocus={true} onChange={(e) =&gt; tableData.onChange(e.target.value)} /&gt;;
            }
          },
          {
            title: 'Type', field: 'type_id', initialEditValue: 1, editable: 'onAdd',
            lookup: columnTypes,
  
          },
          {
            title: '', field: 'alignment_col', initialEditValue: 1, editable: 'onAdd',
            lookup: alignmentColumns,
          }
        ],
        data: []
      });
  </code></pre>
  <p>this is what my material-table looks like. Seems like there should be some kin of onRowSelected for the lookup for a function to run so I can change my state to add the 3rd column if a certain value is selected. I have not found a solution on how to do this.</p>
  <pre><code> &lt;MaterialTable
                    title=&quot;Column Definitions&quot;
                    columns={state.columns}
                    data={state.data}
                    onRowClick={handleClick}
                    editable={{
                      onRowAdd: (newData) =&gt;
                        (async function () {
                          const success = await editorStore.createColumnDefinition(
                            {
                              linkId: linkId,
                              columnName: newData.name,
                              columnType: (state.columns[1].lookup as { [key: number]: string })[newData.type_id],
                              alignmentColumn: (state.columns[2].lookup as { [key: number]: string})[newData.alignment_col]
                            }
                          );
                          if (success) {
                            changeToastValues('success', `Successfully added column '${newData.name}'`);
                            handleOpen();
                          }
                        })(),
                      onRowDelete: (oldData) =&gt;
                        (async function () {
                          const success = await editorStore.deleteColumnsDefinition(linkId, oldData.id);
                          if (success) {
                            changeToastValues('success', `Successfully deleted column '${oldData.name}'`);
                            setState((prevState) =&gt; {
                              const data = [...prevState.data];
                              data.splice(data.indexOf(oldData), 1);
                              return { ...prevState, data };
                            });
                          }
                        })(),
                      onRowUpdate: (newData, oldData) =&gt;
                        (async function () {
                          const resData = await editorStore.editColumnDefinition(newData.id, newData.name);
                          if (resData) {
                            changeToastValues('success', `Successfully edited column '${newData.name}'`);
                            setState((prevState) =&gt; {
                              const data = [...prevState.data];
                              data[data.indexOf(oldData as Row)] = resData as Row;
                              return { ...prevState, data };
                            });
                          }
                        })()
                    }}
                  /&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/TLXp4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TLXp4.png" alt="enter image description here" /></a></p>
  <p>when alignment is selected I want to add another lookup and it should look like this.</p>
  <p><a href="https://i.stack.imgur.com/Ym6zK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ym6zK.png" alt="enter image description here" /></a></p>
  <p>I am struggling on how to get a function to run on selection of a lookup in order to reset the state.</p>