Ngx-datatable: Header click in the empty space to right of the label should sort

[michael-lang]

I'm submitting a ...

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior
A column is sortable, but you can only click on the text of the header to sort it. Issue #536 added the ability to click on the icon also to sort the column.

Expected behavior
When you click to the right of the label, and clearly within the header cell (not on the resizer or checkbox), then the sort should also be triggered.

Reproduction of the problem
The sample grid has the same issue. Here is a mostly working temporary workaround in my view:

  <ngx-datatable-column name="vesselStatus" sortable="true">
    <template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
       <div (click)="sort()" class="sort-fullwidth">Status</div>
    </template>
    <template let-row="row" ngx-datatable-cell-template>
      {{row.vesselStatus}}
    </template>
  </ngx-datatable-column>

in my theme css:

.datatable-header{
  ...
  .datatable-header-cell{
    ...
    .sort-fullwidth{
        display:inline-block;
        width:calc(100% - 20px);
      }
  }
}

This may be better solved by a similar fix as done on issue #536 ?

What is the motivation / use case for changing the behavior?
users sometimes need a wider click area. Smaller header text means less clickable area to trigger the sort. Additionally, the header has a pointer icon in this extra blank space, but clicking does nothing. This leads the user to believe the sort does not work.

Please tell us about your environment:
Windows 10, Webstorm, Angular CLI project

• Table version: 0.7.x
  npm package: "@swimlane/ngx-datatable": "^6.0.2",

• Angular version: 2.0.x
  npm packages:
  "@angular/common": "^2.3.1",
  "@angular/compiler": "^2.3.1",
  "@angular/core": "^2.3.1",
  "@angular/forms": "^2.3.1",
  "@angular/http": "^2.3.1",
  "@angular/platform-browser": "^2.3.1",
  "@angular/platform-browser-dynamic": "^2.3.1",
  "@angular/router": "^3.3.1",

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chome 56

• Language:
  npm: "typescript": "~2.1.5",

[amcdnl]

I disagree that it should do that, maybe if you want that I would suggest implementing a header template.

[Koshmaar]

I strongly agree with the original poster, that having wider clicking area than just a visible text is important from a UX standpoint. I also was trying to click on column headers and expected them to sort, but nothing happened. It gives impression that this doesn't work. And the mouse has a clicking cursor everywhere within header, which certainly doesn't help to to distinguish between genuinly clickable place, or a false one.

So at least the cursor should change to indicate non-clickable place of header, when clicking there won't change anything.

[ndrwptrsn]

I agree with OP as well.

[rreicks13]

This is my hack to get around this:

.datatable-header-cell-label {
  width: calc(100% - 13px); // leave room for sort icon
  float: left;
}

it makes nearly the whole column header clickable except for the 13px that my sort icon takes up. Once you click on it once though the sort icon appears and you are able to click on that as well to sort.