Fill cell area Needed table cells to be links Only link content was clickable, but area around it not That is how I expended the link area to fit the table cell How it was... Became... <Table sx={{ minWidth: 700, height: 0, '& tr': { cursor: 'pointer', height: '100%' }, '& td': { p: '0px', height: '100%' }, '& a': { all: 'inherit', borderBottom: 'none', display: 'flex', alignItems: 'center', p: '16px', height: '100%' } }} > <TableHead> <TableRow> <ColumnHeader .... Traversal with javascript let tbl = document.querySelector('table') tbl.caption <caption> tbl.tHead <thead> tbl.tBodies tBodies collection tbl.tBodies[0] <tbody> tbl.tFoot <tfoot> tbl.rows collection of table rows (tr) tbl.tHead.rows tr collection tbl.tBodies[0].rows tr collection tbl.tFoot.rows tr collection tbl.rows[1].sectionRowIndex 0, index of the given <tr> inside <thead> , <tbody> , <tfoot> tbl.rows[1].rowIndex 1, index of the given <tr> inside table tbl.tBodies[0].rows[1].cells collection of cells <td> in 2nd row tbl.tHead.rows[0].cells[3].cellIndex 3, cell index inside <tr>