Allow columns selection

[adityatoshniwal]

Hi Team,

First of all, thank you so much for this wonderful component.
I have implemented column selection, which will be selected/deselected by clicking on header cells. Multiple columns can be selected. The catch is, if we select any columns and then select rows using checkbox then columns will be de-selected and vice-versa. The purpose here is, allowing selected columns to be copied and pasted in a spreadsheet.
I have also added a demo page /columns-selection.

Can you please review ?

Thanks.

[adityatoshniwal]

I will write the test cases once the code is reviewed.

[adityatoshniwal]

I have also added change for #2744. Please review and let me know if I need to change anything.

[adityatoshniwal]

I need this for pgAdmin data grid for SQL query output. I'm one of the dev of https://www.pgadmin.org.

[amanmahajan7]

I think this be implemented using column.headerRenderer. We can add a click handler and save the columnIdx/key in the local state. We can then add dynamic styles for the selected columns using something like aria-colindex=[columnIdx]

[adityatoshniwal]

Hi @amanmahajan7, I'll try to implement the way you suggested. But, how can I know in my ReactDataGrid caller which columns are selected ? That info is needed. Or is it something in line with sort ?

[adityatoshniwal]

Hello @amanmahajan7 can you please confirm so that I can work on it ?

[adityatoshniwal]

Hello @amanmahajan7, can you please ? It will save a lot of time.

[amanmahajan7]

You should be able to do something like

const [selectedColumns, setSelectedColumns] = useState(new Set());

const columns = useMemo(() => {
  return [
     { 
        key, 
        name, 
        headerRenderer(props) { return <div onClick={toggleSelectedColumn}><HeaderRenderer {...props}></div> } />
     ...
  ]
}, [...])

https://github.com/adazzle/react-data-grid/blob/main/website/demos/ColumnsReordering.tsx#L96

[adityatoshniwal]

@amanmahajan7 Oh OK !! You mean there is no need to change the code and just use HeaderRenderer instead.
I'll give a try. Thanks. 👍