Hello, thank you for your work creating this project!
My Question
I am trying to add buttons to the Column Headers of the spreadsheet that the user can click in order to ADD or DELETE the column.
Is this possible? If not, is there a work around?
What I have tried
I have created a custom ColumnIndicator as shown below and passed into the spreadsheet component. However, there is no way I can see to handle the button click.
In this issue: #104, adding a button to the component and handling the button click becomes possible as you have provided an onChange event for the DataViewer. However, as an onChange props is not passed down from the parent, it does not seem possible through this method.
const customColumnIndicator = ({ column, label }) => {
const deleteClickHandler = () => {
/* this function would handle on delete.
* how do we propagate this to outside the
* spreadsheet component?
*/
}
return (
<>
<span>props.label?.toString() || String(props.column)</span>
<button onClick={deleteClickHandler}>Delete this col</button>
</>
)
}
....
<Spreadsheet
rowLabels={someRowLabelList}
columnLabels={someColumnLabelList}
onChange={someChangeHandler}
data={someData}
ColumnIndicator={customColumnIndicator}
>
</Spreadsheet>
Thank you!
Hello, thank you for your work creating this project!
My Question
I am trying to add buttons to the Column Headers of the spreadsheet that the user can click in order to ADD or DELETE the column.
Is this possible? If not, is there a work around?
What I have tried
I have created a custom ColumnIndicator as shown below and passed into the spreadsheet component. However, there is no way I can see to handle the button click.
In this issue: #104, adding a button to the component and handling the button click becomes possible as you have provided an onChange event for the DataViewer. However, as an onChange props is not passed down from the parent, it does not seem possible through this method.
Thank you!