I've bined both the most basic examples on resizing and column sorting. Right now, if I click on the resizing object (blue bar) in the below example, the column will both resize and sort. I would like to suppress sorting while it is resizing.

See: Line 106

  {/* Use column.getResizerProps to hook up the events correctly */}
  <div
  {...column.getResizerProps()}
  className={`resizer ${column.isResizing ? "isResizing" : ""}`}
  />

I suspect I need to override the OnClick event handler in some way to call "stopPropagation" while still calling the original handler. Is there a simple way to do this? If not, how could this be handled?

I'm very new to js/react

I've bined both the most basic examples on resizing and column sorting. Right now, if I click on the resizing object (blue bar) in the below example, the column will both resize and sort. I would like to suppress sorting while it is resizing.

See: Line 106

  {/* Use column.getResizerProps to hook up the events correctly */}
  <div
  {...column.getResizerProps()}
  className={`resizer ${column.isResizing ? "isResizing" : ""}`}
  />

https://codesandbox.io/s/react-tablev2-stt1z

I suspect I need to override the OnClick event handler in some way to call "stopPropagation" while still calling the original handler. Is there a simple way to do this? If not, how could this be handled?

I'm very new to js/react

• javascript
• reactjs
• react-table

2 Answers 2

For those of you using react, add an onClick to the div you added the getResizeProps() to. Have the onClick prevent default and stops propagation. This will prevent the sorting when clicking the resizing div.

<Table.Header >
    {headerGroups.map((headerGroup: any) => (
        <Table.Row {...headerGroup.getHeaderGroupProps()} id={'column-header'}>
            {headerGroup.headers.map((column: any) => (
                <Table.HeaderCell {...column.getHeaderProps(column.getSortByToggleProps())}
                                  className={'table-header-cell column-name'}
                                  textAlign={'center'}>
                    {column.render('Header')}
                    <span>
                        {column.isSorted ? column.isSortedDesc ?
                        <Icon name={'sort down'}/> : <Icon name={'sort up'}/> : ''}
                    </span>
                    <div
                        {...column.getResizerProps()}
                        className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
                        onClick={(e)=>{e.preventDefault();e.stopPropagation()}}/>
                </Table.HeaderCell>
            ))}
        </Table.Row>
    ))}
</Table.Header>

This issue is occurring due to 'resizer' div is inside the

<div {...column.getHeaderProps(column.getSortByToggleProps())}>

you can update jsx structure like following:

<div>
        {headerGroups.map(headerGroup => (
          <div {...headerGroup.getHeaderGroupProps()} className="tr">
            {headerGroup.headers.map(column => (
              <div className="th">
                <div {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {column.render("Header")}
                  {/* Add a sort direction indicator */}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? "