Use ag-grid in data viewer

[renkun-ken]

What problem did you solve?

Closes #506

This PR replaces DataTables with ag-grid in the data viewer.

(If you have)Screenshot

Kapture.2021-07-15.at.23.03.56.mp4

(If you do not have screenshot) How can I check this pull request?

View any data.frame or matrix and the data viewer will use ag-grid to present the table with the following features:

• Sortable columns (hold shift for multi-sort)
• Filterable columns (filter number, date, text by conditions)
• Resizable columns
• Movable columns
• Pagination
• Great performance
• Dark theme

[danielbasso]

Looking great! By any chance "Pagination" means dynamic loading? It would be perfect.

[renkun-ken]

Looking great! By any chance "Pagination" means dynamic loading? It would be perfect.

It's not dynamic loading here.

[ElianHugh]

Is there another setup requirement in addition to running yarn? I'm getting several errors due to missing files, e.g.:

(Error: Unable to resolve non-existing file 'vscode-remote://wsl+ubuntu-20.04/vscode-resource?{"requestResourcePath":"/home/elian/coding/VS/vscode-R/dist/resources/ag-grid-community.min.noStyle.js"}')

[renkun-ken]

We need those js css resources to be copied from node_modules to dist/resources as specified in webpack.config.js. You might need to run node .github/scripts/enableWebpack.js and run.

[ElianHugh]

Lists and data.frames work nicely both locally and on live share! Not a must, but do you think it would be worth using some custom css to better fit the vscode theme? I threw a little css together for an example:

Otherwise, LGTM

[renkun-ken]

Lists and data.frames work nicely both locally and on live share! Not a must, but do you think it would be worth using some custom css to better fit the vscode theme? I threw a little css together for an example:

Looks great! Would you like to provide a better css here?

[renkun-ken]

I've done some changes to make it also work with high-contrast theme. Now everything looks good.

[ElianHugh]

Looks good and works well, thanks!