[Proposal][DeAngular][table] table visualization re-write to get rid of angular

[ananzh]

Statement

Currently, table visualization is written in Angular. Angular is not supported since 12/2021 and cause high severity CVE issues. Since we decided to remove angular from current code base, table visualization needs to be refactored ore re-written in ReAct. Meanwhile, our current table visualization is old and we see new requests from users to get it updated.

In this issue, I would like to first introduce the core features of the current table visualization. Then make some high-level proposals for the new table visualization. We will leave the implementation details in another design issue.

Current Table Visualization

The table visualization is used to show data in a table format. It is bootstrapped when a table is rendered. 

create and access

create a table visualization

• on home page, click the side bar menu and click visualize
• on the top right of the visualizations list, click Create visualization
• choose Data Table as the visualization type and then choose the index pattern
• a table visualization will be rendered based on the default settings

access an existing table visualization

There are three ways to access the saved visualizations.

• the visualizations list

• the saved object (Stack Management --> Saved objects)

• if the table vis is saved in a dashboard, you could also access it from there

features

sort the column (asc, desc)

Currently, there are only two ways to sort: asc and desc (see below image)

• click the black up-pointing triangle to do asc sort
• click the black down-pointing triangle to do desc sort

pagination

• table has the pagination depending on how many data to show (see below image)

export table as csv

There are two options, Raw and Formatted

• click Raw to export the data table in csv
• click Formatted to export the data table in csv
• There is one column missing which is chosen from options --> percentage column.

split table in columns and rows

• table can be split. there are two options.

• split table in Rows

• split table in Columns

show total

• click options --> show total. Then you will be able to select different metrics.

see there is a calculated total at the bottom:

show partial rows

• click options --> show partial rows. This option will allow table visualization to show partial rows if there are many columns.

show metrics for every bucket/level

show percentage column

• click options --> choose Percentage column and the metrics
• the default is Don't show

Proposal

The purpose to create a new table visualization is to remove Angular code and upgrade our table visualization. It should be easy to use with minimum learning curve. Therefore, I would like to propose minimal changes from usage perspective:

• use the same creation method
• keep all the three access ways
• keep all the current core features
• some improvements to consider:

(a) the black up-pointing/down-pointing triangle is not clear to me

(b) the column width is not adjustable. when there are a lot of columns, users don't have the choice to adjust the column.

• [optional][new feature] pivot table: Pivot table visualisation #705

Providing feedback

The purpose of this proposal is to introduce our current table visualization and our thoughts to enhance the usability. We would like to collect feedback from the community. This proposal is meant to cover the high-level proposal and functionality but does not go into implementation details and architecture. Once we get feedback from the community we will publish a more detailed design doc.

For any feedback on the problem statement, the proposal, or any open questions please leave your comments on this issue. Looking forward to your input!

[joshuarrrr]

@ananzh I bumped this to target the 2.5.0 release.

[ananzh]

Close it due to new table vis been merged into main.