Refactor/list

[rockingrohit9639]

No description provided.

[DonKoko]

Added one comment in the code and also, we get this error now:

Warning: validateDOMNesting(...): <a> cannot appear as a child of <tr>.

I am not 100% sure whats the correct way to handle this tbh. I did some research and found 3 options, that don't require JS:

1. We place the link inside each td and set them to display: block. This could be a bit messy in terms of code but its a proper solution
2. We place the link inside but not as a wrapper of . We give it absolute position and we stretch it over teh whole to cover it
3. Combination of both. Use the link inside the first column only, and then use css to stretch it over teh whole row with absolute positioning
4. Re-create the table with divs instead of table elements and use something like this:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}

I actually dont think that last option is that bad because we already have components for all the table stuff so we would just need to edit those components. What we have to make sure is it fully behaves as a normal table tho.

LMK what you think and lets decide which solution to go for.

[DonKoko]

Can you please add some comments on the type definition so we can see them when we hover the prop in vscode. Same for onRowClick.