最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - In react-table, I've combined basic sorting and resizing examples but want to suppress sorting while resizi

programmeradmin2浏览0评论

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

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

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论