LF-4084: Update table/2 to include checkboxes and row selection behaviour

[SayakaOno]

Description

• Update V2 table to support checkbox and sticky header and style selected rows
• Add stories and cleanup

NOTE: I didn't apply the new checkbox style as it seems like it would require a good amount of effort.

Jira link: https://lite-farm.atlassian.net/browse/LF-4084

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[Duncan-Brain]

It looks good to me!

I think the only thing I would consider adding is a clear all on the story when the select all is checked.

[antsgar]

I wonder if these two could be combined and simplified by passing a setSelectedIds function prop instead, and letting the table handle the different scenarios where the selected IDs need to change

[SayakaOno]

It's possible, but I'm hesitant to do it.
A few of my concerns:

• flexibility - what if we want to do something else when checkbox is clicked?
• duplicated handleSelectAllClick - we will have a function for this in its parent component anyways because we have "clear selection" in the action menu

Are they not a big deal??

Update:
I figured that handleSelectAllClick should be like this:

const handleSelectAllClick = (e) => {
  if (e.target.checked) {
    setSelectedIds(data.map(({ id }) => id));
  } else {
    setSelectedIds([]);
  }
};

Considering we will have to write this in parent components, I am not sure which is better...

[antsgar]

Those are good points, this was just a suggestion but I think either way is alright!

[Duncan-Brain]

@SayakaOno happy to approve but I think this morning the other table pr was merged so there are now conflicts