Add component for metrics table

[ninetteadhikari]

Is your feature request related to a problem? Please describe.

First iteration

• [x] add new item input field sticks to the bottom of the screen when the table is long (similar to adding new project)
• [x] allow users to add data per column for new row (similar to adding new project)
• [x] allow users to do in-line edit of data (same as h-table)
• [ ] allow users to hide/show column and save the selection
• [ ] allow users to sort column data (same as h-table)
• [ ] allow users to drag and drop to move a column and save the position:
• [x] if column is a known set of options, display a dropdown: https://github.com/hikaya-io/hakawati/issues/241

For future enhancements:

• [ ] allow user to control the width of the column
• [ ] allow users to move a row and save the position
• [ ] allow devs to merge cells (header cells): example from ElementUI: https://element.eleme.io/#/en-US/component/table#grouping-table-head
• [ ] allow users to freeze/fix certain columns
• [ ] allows user to use tab key to switch cells
• [ ] make the '+' add button to be sticky at the bottom when the table is long
• [ ] Delete row: need a button to trigger the deletion

Additional context Link to figma:

• Under Metrics > Under section Objectives / Indicators - Latest: https://www.figma.com/file/2bizWQnCDp0r5RZzrM25jX/Dots?node-id=7125%3A60501

[andrewtpham]

Hey @michaelbukachi there's a related component to this new table that we could add. I also would like to see how it can also be used with the h-table editable component: https://github.com/hikaya-io/hakawati/issues/241

[andrewtpham]

Vue spreadsheet component: https://github.com/joffreyBerrier/vue-spreadsheet

[ninetteadhikari]

Update:

• The table can be called spreadsheet-table
• this library requires a particular version of node which will restrict us in running other libraries for Dots. So we cannot use this one.
• Other library to explore:
  • https://github.com/revolist/vue-datagrid
  • https://www.npmjs.com/package/opentable

[ninetteadhikari]

First iteration: get the basic styling in place next iterations: column persistence

[ninetteadhikari]

Note:

• For moving columns to a new position we do not need a confirmation.
• We can leave out the dynamic row height for bigger content size. We can truncate the content so it fits in one row for now. Future enhancement can be done to support dynamic row height.
• For column header dropdown add a flag to separate between h-table and h-spreadsheet
• Add tests for the component

[andrewtpham]

@michaelbukachi I've added a few new screens in the description to help explain the design of the functionality. Let me know if I can clarify anything.

[andrewtpham]

New spreadsheet design is updated in the description. Figma screens can be found here: https://www.figma.com/file/2bizWQnCDp0r5RZzrM25jX/Dots?node-id=7125%3A60501