title: How to add button to material ui table at the bottom?
body: <p>This is the code for the material ui in react typescript. I am trying to add a button at the bottom which when clicked leads to a form, but after trying many things, I still dont know how to do that?
  I just need a simple button at the bottom, any help is appreciated</p>
  
  <p>This is the code from the website</p>
  
  <pre><code>import React from 'react';
  import MaterialTable, { Column } from 'material-table';
  
  interface Row {
    name: string;
    surname: string;
    birthYear: number;
    birthCity: number;
  }
  
  interface TableState {
    columns: Array&lt;Column&lt;Row&gt;&gt;;
    data: Row[];
  }
  
  export default function MaterialTableDemo() {
    const [state, setState] = React.useState&lt;TableState&gt;({
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ],
      data: [
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        {
          name: 'Zerya Betül',
          surname: 'Baran',
          birthYear: 2017,
          birthCity: 34,
        },
      ],
    });
  
    return (
      &lt;MaterialTable
        title="Editable Example"
        columns={state.columns}
        data={state.data}
        editable={{
          onRowAdd: (newData) =&gt;
            new Promise((resolve) =&gt; {
              setTimeout(() =&gt; {
                resolve();
                setState((prevState) =&gt; {
                  const data = [...prevState.data];
                  data.push(newData);
                  return { ...prevState, data };
                });
              }, 600);
            }),
          onRowUpdate: (newData, oldData) =&gt;
            new Promise((resolve) =&gt; {
              setTimeout(() =&gt; {
                resolve();
                if (oldData) {
                  setState((prevState) =&gt; {
                    const data = [...prevState.data];
                    data[data.indexOf(oldData)] = newData;
                    return { ...prevState, data };
                  });
                }
              }, 600);
            }),
          onRowDelete: (oldData) =&gt;
            new Promise((resolve) =&gt; {
              setTimeout(() =&gt; {
                resolve();
                setState((prevState) =&gt; {
                  const data = [...prevState.data];
                  data.splice(data.indexOf(oldData), 1);
                  return { ...prevState, data };
                });
              }, 600);
            }),
        }}
      /&gt;
    );
  }
  </code></pre>
  
  <p>This is what i want the button to look like:
  <a href="https://i.stack.imgur.com/8KOuK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8KOuK.png" alt="enter image description here"></a></p>