DataTablesSrc icon indicating copy to clipboard operation
DataTablesSrc copied to clipboard

Formatting should use the displayed value, not the data-sort value

Open fisharebest opened this issue 1 year ago • 2 comments

See https://codepen.io/fisharebest/pen/dPbPddq for a live example.

Adding data-sort to a column causes it to be formatted according to the type of data-sort, rather than the type of the displayed value.

Without data-sort, column one is left-justified and column two is right-justified - as expected.

<table>
  <thead>
    <tr><td>Medal</td><td>Count</td></tr>
  </thead>
  <tbody>
    <tr><td>Gold</td><td>3</td></tr>
    <tr><td>Silver</td><td>2</td></tr>
    <tr><td>Bronze</td><td>4</td></tr>
  </tbody>
</table>

With data-sort, both columns are now right-justified - which is wrong. Changing the sorting shouldn't change the display.

<table>
  <thead>
    <tr><td>Medal</td><td>Count</td></tr>
  </thead>
  <tbody>
    <tr><td data-sort="1">Gold</td><td>3</td></tr>
    <tr><td data-sort="2">Silver</td><td>2</td></tr>
    <tr><td data-sort="3">Bronze</td><td>4</td></tr>
  </tbody>
</table>

fisharebest avatar Nov 29 '24 11:11 fisharebest

I take the point - that isn't ideal. Unfortunately at the moment there isn't orthogonal data types in DataTables - ideally there would be a data type for the sort, another for the display, another for the filter, etc. However at the moment they are all lumped together into a single "type". This is much simpler and better for performance, but the down side is that we can get weird quirks like this.

For now, the solution is to set the class for the column to align the text left (dt-left would do).

Another option would be to use the enum plugin and have it sort on Gold, Silver, Bronze.

Sorry I don't have a better answer at the moment - orthogonal types is something I've been thinking about, but it isn't yet on the roadmap.

AllanJard avatar Nov 29 '24 11:11 AllanJard

Thanks for the quick reply and explanation.

As a simple workaround, I can force my sort-data to be text. e.g.

data-sort="<?= $n++ ?>"

becomes

data-sort="x<?= sprintf('%07d', $n++) ?>"

fisharebest avatar Nov 29 '24 12:11 fisharebest