Deangularize data table visualization

[flash1293]

The data table visualization https://github.com/elastic/kibana/tree/master/src/plugins/vis_type_table is currently implemented using angular which is bootstrapped when a table is rendered somewhere. To modernize the look and feel as well as to get rid of the angular dependency, it should be replaced by the data grid component: https://elastic.github.io/eui/#/tabular-content/data-grid. The features offered by the table visualization should stay the same (no changes to the available options).

Features of the rendered table

• Sort by column
• Show total row below (but on each page)
• Pagination
• Data export as csv
• Split table (either in columns or in rows)
• Show calculated percentage column

• When hovering over a bucket column, show filters buttons to filter by the value in the cell

Implementation hints

Datagrid doesn't support "splitted" grids, so the visualization renderer has to render multiple data grid components and layout them itself when the "split table" feature is used.

Datagrid supports sorting out of the box, so we can leverage that. One thing to keep in mind - the sorting of splitted tables has to be kept consistent

Filter buttons per cell should be shown on hover (like in current table) and in the popover using the popoverContents property as well for keyboard-oriented usage.

The total row is not possible in the EUI component at the moment, please focus on the other parts of the visualization first.

The main entrypoint which is initializing angular and calling it to render the visualization is located in https://github.com/elastic/kibana/blob/master/src/plugins/vis_type_table/public/vis_controller.ts The render function in there should render the react component with ReactDom.render().

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[flash1293]

cc @kertal @dziyanadzeraviankina

[kertal]

related: #51531