improve dataframe UI

[scottdraves]

put a menu on every column, this menu would have the format & centering & visibility check, sort order, and the left/right fix selection. the menu appears as the same 3-dot menu as is already on the index column, the one for the whole table.

remove the current triangle overlays that show the sort order. instead show the sort order by altering the 3-dot menu, replacing the dots with little triangles that point the right way. UI to cycle through sorts (clicking on header) would remain the same.

the menu only appears on hover over the column header (similar fade to the blue insert cell buttons).
hover should also highlight the column below (like rows already do).
the menu for the index column, the one that opens the table-wide options menu, which is currently always visible should remain always visible.

drag and drop reorganization of columns (keep this feature!)

double click selects a single cell. single click toggles row selection.
arrow keys move the selection.

row highlight should include index column.

Most of these column options are moved from the current table-wide options window, which would be smaller, and lose its tabs. Can we get rid of it completely?

add to the table-wide cell menu (after "Save Selected As CSV")

1. Show all columns
2. hide all columns

keyboard bindings (add these to column menu also):
digit 1-9: set precision, number of digits shown.
b to show bar chart in bkg of all cells in current column.
h to show heatmap in bkg of current column.
current = mouseover unless kbd has moved it.

navigate current with arrow keys.

an API for setting the defaults for these: #1857

[tomca32]

Maybe we could try if some other solution is more performant first.

Something like this: http://www.ag-grid.com/

This also seems to be native to angular. Also http://ui-grid.info/

Could we put these three (datatables, ag-grid and ui-grid) on the same page and check which performs the best?

[scottdraves]

this too: #1581

[scottdraves]

and column headers should have a tooltip that shows their type and any other column state.
add a menu item to the end of the column menu which shows the type of the column like "Type: string" or "Type: date" or "Type: number". Selecting this item does nothing, similar to the "elapsed time" menu item in the output cell menu, it is there to show a value.

To do this we need type tags per column, it's not just a UI issue...

[scottdraves]

change of plans please don't do this:
hover should also highlight the column below (like rows already do).

[scottdraves]

how about search/filter rows?

[alice-kroch]

There are two separated plugins for filtering and searching for DataTables. So you can take a look and decide if we can integrate any of them.

[scottdraves]

this looks great https://datatables.net/examples/api/multi_filter.html
in our case the search box would pop up on command, normally it would be hidden.

[scottdraves]

and #1439

[alice-kroch]

@scottdraves , can you, please, describe the command on which pop up will appear and pop up behavior as well? Actually search/filter field is a part of dataTables plugin and it should be rendered from pattern. I'm not sure that it's possible to build it separately in pop up.

[alice-kroch]

Updated. Please, check out this version.

[alice-kroch]

Updated. Please, check the new features. Also, I think, now we can get rid of 'Cell Formatting' tab in table options modal window, so please check it and let me know.

[scottdraves]

agreed.

also please bring up to date with master.

[alice-kroch]

Updated, please, check.