Change MixnodeDetail page's datagrid into a reuseable table component

[Aid19801]

This PR seeks to switch-out the sortable datagrid on Mixnode Detail page for a reuseable MUI Table with one row.

• created new component <UniversalTable /> using same props as Data Grid for consistency.
• Flow:
  ➡️ component takes ColumnHeaders (similar to datagrid), maps through and renders out MUI TableHead cells.
  ➡️ component takes preformatted rows prop (parent using util func mixnodeToGridRow()) which in this instance is just one row of data.
  ➡️ component double maps through rows (again, 1 on Mixnode Detail page) AND maps through ColumnsData to match the correct value.
  ➡️ component dynamically checks if the value is bond and formats PUNK, or returns value if not.

MUI / TS THOUGHTS:-

• I couldn't get export const UniversalTable: React.FC = () => ... to work. Will investigate further but advice where I'm going wrong in understanding that, much appreciated.
• Is the double .map() alright with you both? Is there any easier way of achieving this? Will explore .reduce and zips shortly and if i find something will push.
• Spacing: I'd quite like a neater way to space out columns, again tried a couple of approaches (flex: 1 but native mui width overrides it, could pass in width through ColumnsData prop, but feels very manual.)

[fmtabbara]

If this is a component use React.FC for the typing - Just saw your message above. Will give you a hand getting it to work

[Aid19801]

i figured it out actually. It was the missing angle brackets! 👀

pushed now.

export const UniversalTable: React.FC<{
  tableName: string;
  columnsData: ColumnsType[];
  rows: MixnodeRowType[];
}> = ({ tableName, columnsData, rows }: UniversalTableProps)

[fmtabbara]

This stops the component from being reuseable as it expects the property owner to exists. I suggest either building it as a specialised component and call it what it is being used for DetailTable or something like that and then speficy the row prop type OR the other option is to make it reuseable by allowing any row properties to be passed to it and using a generic type.

[Aid19801]

I've changed it to <DetailTable /> for now along with the args for TS.

[fmtabbara]

'Need this to be typed. See comment below on how we could do this.

[Aid19801]

hah yeah, beat you to it, sorry. i got there in the end.