get tableId with document.getElementById return null

[ARusDian]

material-react-table version

v0.36.0

Describe the bug and the steps to reproduce it

I have a problem when trying to get TableId using document.getElementById, for export customed data to excel later, i already define the tableId props and used callback for the getElementById function and the console.log of it return null

here the error log

thank you!

Your Minimal, Reproducible Example - Sandbox (Recommended) or code snippets

<div>
	<Button
		onClick={() => console.log(document.getElementById('market-table'))}
	>
		 Export All
	</Button>
</div>
<MaterialReactTable
        tableId="market-table"
        columns={dataColumns}
        data={filteredMarketsByNameState}
        enableColumnActions={true}
        enableColumnFilters={true}
        enablePagination={true}
        enableSorting={true}
        enableBottomToolbar={true}
        enableTopToolbar={true}
        enableRowNumbers={true}
        muiTableBodyRowProps={{ hover: true }}
/>

Screenshots or Videos (Optional)

here screenshot my code too

Do you intend to try to help solve this bug with your own PR?

No, because I don't know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

The tableId prop is not actually for an html id. It is used internally as a unique identifier in case other MRT tables are rendered on the same page. And actually I'm probably to get rid of the need of this props existence soon so that it does not cause confusion like this.

What you are probably wanting to do is add a real html id attribute to the <table> tag is what I'm guessing? If so do this:

<MaterialReactTable
  muiTableProps: {
    id: 'market-table'
  }
/>

Though it is probably worth mentioning here that using getElementById isn't best practice in React, but using refs is what is encouraged. You can do that too like this:

const tableRef = useRef(null)

return (<MaterialReactTable
  muiTableProps: {
    ref: tableRef
  }
/>);

[ARusDian]

Thanks for ur answer sir it's work nicely now

have a good day