Add additional Table components

[andrewtpham]

Component link: https://element.eleme.io/#/en-US/component/table

Components to build:

• Basic table ✅
• Table with status ✅
• Table with border
• Table with fixed header
• Grouping table head
• Multiple select
• Sorting
• Filter
• Summary row
• Row span (method = span-method)
• Expandable row

[andrewtpham]

@chelliah @hvitis this would be a good one to get your help on. I was having issues making it reusable but happy to get your help with it :)

[hvitis]

@andrewtpham I've already took UI-14 and made pull request. https://github.com/hikaya-io/vue-ui-components/pull/49 Once it's approved and my thinking is OK I will move to this one.

[hvitis]

Hello @andrewtpham @ninetteadhikari

I've moved the code to storybook but I'm not sure about for example: (method = span-method) what did you mean by that?

Also I'm a bit uncertain about 2 things:

• What else besides moving is there to do? Passing data as props? Most of the tables are very similar in this case.
• Should I call all the components using word with e.g.:

  <table-with-expandable-row />
  <table-with-fixed-header />
  <table-with-summary-row />

  etc or without with ? The branch for this issue is: https://github.com/hikaya-io/vue-ui-components/tree/UI-27 Thanks a bunch!

[andrewtpham]

Hi @hvitis, thanks for the update! I'd like to explore the rowspan so we can merged multiple rows in a single column as shown in the example here: https://element.eleme.io/#/en-US/component/table#rowspan-and-colspan

On your 2 questions:

1. We want to pass data as props so we can make the component reusable. From how I understand it, if we can pass data from the table.stories.js file that will allow the component to be reusable. Currently how I started out with the BasicTable and TableWithStatus, they are not reusable and need refactoring. If the tables are very similar in this case that is okay, the point then would be to replicate it so then in the storybook it shows the different examples. See how we did the buttons component, they are very similar.

2. Yes, your naming suggestion sounds good! If we can call each component using a consistent format and use the naming as Element refers to it that would be great. Let's go with with :)

<table-with-expandable-row />
<table-with-fixed-header />
<table-with-summary-row />

[hvitis]

Roger that!

PR waiting for approval.

Basic table ✅ Table with status ✅ Table with border✅ Table with fixed header✅ Grouping table head✅ Multiple select✅ Sorting✅ Filter✅ Summary row✅ Row span (method = span-method)✅ Expandable row✅