Skip to content

[Question] Is there a way to add a button to custom ColumnIndicators? #191

Description

@nicoalee

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions