# TableEditor

<figure><img src="https://67932947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHWsslZpYESUXxPccoyig%2Fuploads%2Fgit-blob-7462ef875562bad9ada92755f8ed4b47264835df%2Fimage.png?alt=media" alt=""><figcaption><p>Brings up a table editor</p></figcaption></figure>

<pre class="language-tsx" data-overflow="wrap"><code class="lang-tsx">import { CanvasGrid, DeleteSheetConfirmation } from "@rowsncolumns/spreadsheet"
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state"

const App = () => {
  const activeSheetId = 1
<strong>  const { onUpdateTable, onRequestEditTable, getSheetName } = useSpreadsheetState({
</strong>    ...
  })
  return (
    &#x3C;>
      &#x3C;button onClick={() => {
        onRequestEditTable(table)
      }>Edit table&#x3C;/button>
      &#x3C;CanvasGrid />
      &#x3C;TableEditor
        sheetId={activeSheetId}
        rowCount={rowCount}
        columnCount={columnCount}
        getSheetName={getSheetName}
        onSubmit={onUpdateTable}
      />
    &#x3C;/>
  )
}
</code></pre>
