admin管理员组

文章数量:1320661

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
Share Improve this question asked Dec 9, 2019 at 23:29 Chris3yChris3y 1782 silver badges9 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

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
                        ? " 

                本文标签：
                

                        版权声明：本文标题：javascript - In react-table, I&#39;ve combined basic sorting and resizing examples but want to suppress sorting while resizi 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1742065266a2418794.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。