Reusable table component and example

[robertardeleanu]

What does it fix?

Implemented a generic and configurable table component and example for it
Closes #135

How has it been tested?

Manually tested with the example itself

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
teacher-workout-client	✅ Ready (Inspect)	Visit Preview	Apr 30, 2022 at 2:23PM (UTC)

[dasilvaluis]

It is possible to chain these methods, such as (also added an alternative to the double return)

array
  .map((el, index) => [el, index])
  .sort((a, b) => {
    const elementOrder = comparator(a[0], b[0]);
    const decisiveOrder = elementOrder === 0 ? a[1] - b[1] : elementOrder;

    return decisiveOrder;
  })
  .map((el) => el[0]);

[dasilvaluis]

I see there is a code repetition, it could be shortened to:

Suggested change

	return order === "desc"
	const scalar = order === "desc" ? 1 : -1;
	return scalar * descendingComparator(a.original, b.original, orderBy);

[dasilvaluis]

This logic could be simplified to

Suggested change

	if (b[orderBy] < a[orderBy]) {
	return b[orderBy] - a[orderBy];

But further, the below function could be simplified to

const scalar = order === "desc" ? 1 : -1;
return scalar * (b.original[orderBy] - a.original[orderBy]);

And this logic as they are pure functions, they could be entirely moved to a helper file with some test suite

[dasilvaluis]

I am not sure if by assigning this component straight to the const React will execute (not necessary render) code that is inside of it, it is worth to check.

Also the code <TableCell padding="checkbox"> is repeated, it could be returned regardless and then composed with Checkbox / Radio

[dasilvaluis]

Many of these functions could be placed in a separate file, as it clogs this whole file

[dasilvaluis]

This hook will always run because it has no dependencies, making memoizing not useful

[dasilvaluis]

Could there be an "enum" for asc/desc to be used across this component? Thinking of benefit of auto complete and prevent typos

const orderType = {
  asc: 'asc',
  desc: 'desc'
};

[dasilvaluis]

TableCell could wrap around the actual alternatives

Suggested change

	<TableCell>
	<TableCell>
	{Template ? <Template row={row} /> : row.original[column.accessor]}
	</TableCell>

[dasilvaluis]

The Math.max is already going establish a lower limit to 0, no?

Suggested change

	const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - processedData.length) : 0;
	const emptyRows = Math.max(0, (1 + page) * rowsPerPage - processedData.length);

[dasilvaluis]

If possible we could import functions individually, so that it can be tree-shaked

Suggested change

	import _ from 'lodash';
	import { noop } from 'lodash';