Add default sort to KTable

[MisRob]

🌱 Are you new to the codebase? Welcome! Please see the contributing guidelines.

Summary

Add a new feature to KTable that will allow the table to be sorted by default when initially loaded based on a chosen column. To achieve this:

• (1) Each entry of headers will be expected to have a unique column identifier columnId
• (2) There will be a new prop defaultSort to receives a configuration object { columnId, direction }. columnId references a columnId defined in headers. This specifies a column by which the table should be sorted when initially loaded. direction can be 'asc' for ascending or 'desc' for descending sort direction. defaultSort prop is not required.

This feature is optional. The table should not be sorted by any column when initially loaded unless defaultSort is provided.

Usage example

<KTable
  sortable
  :headers="headers"
  :rows="rows"
  :defaultSort="{columnId: 'nameCol', direction: 'asc'}"
  ...
/>

data() {
  return {
    headers: [
      { columnId: 'nameCol', label: 'Name', dataType: 'string' },
      { columnId: 'ageCol', label: 'Age', dataType: 'number' },
      { columnId: 'citCol', label: 'City', dataType: 'string' },
    ],
    rows: [
      ['John Doe', 28, 'New York'],
      ['Alice Johnson', 30, 'Houston'],
      ['Emily Davis', 27, 'Philadelphia'],
    ]
  }
}

makes the table entries to be sorted by name in ascending direction when initially loaded.

Related tasks

Validation

• KTable throws a warning when columnId is not present in any entry of headers. This should be the case no matter of whether defaultSort is used or not.
• KTable throws a warning when defaultSort's direction is a wrong value. Only allowed values are 'asc' and 'desc'.
• KTable throws a warning when defaultSort's columnId wasn't found in headers.

Documentation

• All existing KTable documentation examples are updated with columnId in headers
• There's a new sub-section in KTable's documentation "Usage" section that explains this new feature

References

• Initial proposal discussed and decisions made in https://github.com/learningequality/kolibri-design-system/issues/772

Use-cases

• Some Kolibri tables with names will be sorted by full name in ascending order when page loaded (Figma designs)

Guidance

• Use the playground page for development
• For documentation updates
  • Follow “Writing” guidelines. Use language that is consistent with other documentation pages
  • Refer to "How to update the documentation website" and code of the existing documentation pages

Acceptance criteria

• [ ] The feature is implemented as specified above
• [ ] The feature is covered by unit tests
• [ ] There are no regressions in existing KTable usages
• [ ] KTable has new validations as specified above
• [ ] KTable documentation page is updated as specified above

[shivam-daksh]

Hey @MisRob, I would like to work on this?

[MisRob]

Hi @shivam-daksh, if this is still free after you resolve https://github.com/learningequality/kolibri-design-system/issues/795, message me again and we will assign you here too. https://github.com/learningequality/kolibri-design-system/issues/795 will be a good entry to familiarize yourself with KTable :)

[iamnovaprince]

Hi @MisRob , I would like to work on this issue Can you assign me ?

[AlexVelezLl]

Hey @iamnovaprince! Thanks for your interest in contributing to this issue. I will assign this to you. Please let us know if you have any question 🤗.

[EshaanAgg]

Hi! I just wanted to confirm if this issue is being worked upon by @iamnovaprince right now or if the same is open for other contributors?

[iamnovaprince]

Hi! , Due to some unforeseen work that came to me , I am not being able to give much time to the issue. @AlexVelezLl feel free to assign the issue to @EshaanAgg

Sorry for the inconvenience

[MisRob]

Hi!

@iamnovaprince no need to apologize at all, thank you for considering volunteering your time, we appreciate it.

@EshaanAgg seeing you showing up here gives me smiles and it'd be so wonderful to have you work on what @BabyElias has started and still continues! Welcome back and I hope to see you on Slack - let's chat how are you :)

Regarding this work, I'm happy to assign you. Table has many keyboard and screen reader features - I would recommend to spend some time understanding the current implementation in detail. Let us know if you had any questions.