[Vis Builder] hookup table visualization in vis buidler

[ananzh]

Description
We would like to hook up table vis in the vis builder to allow customer to explore the new table vis.

Expected behavior
After enabling vis builder, go to Visualize and click Create Visualization. Click VisBuilder then choose table as the visualization type.

OpenSearch Version
2.4

Dashboards Version
2.4

[ananzh]

Follow-up:
Currently, in table visualization, we are using setState in parent component. When table_vis_component updates sort/width, setState will force the parent to re-render.

const [sort, setSort] = useState<SortColumn>(
    handlers.uiState.get('vis.sortColumn') || { colIndex: null, direction: null }
  );
const [width, setWidth] = useState<ColumnWidth[]>(handlers.uiState.get('vis.sortColumn') || []);

const tableUiState: TableUiState = { sort, setSort, width, setWidth };

However, this will create duplicate states since uiState in handlers also have sort and width state. We would like to eliminate this duplicate state.

[ashwin-pc]

@ananzh Can you move that comment into a separate issue? When you resolve this issue, this will get lost in the ether without an open issue to tack it.