search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.28k stars 288 forks source link

Wrong initial descending DataTable sorting icon state #563

Open pboguslawski opened 1 year ago

pboguslawski commented 1 year ago

Describe the bug When creating datatable with sortable enabled and sortDirection set to descending, arrow is rendered as ascending.

To Reproduce Steps to reproduce the behavior:

  1. Create component from "Sortable" source available on https://sveltematerialui.com/demo/data-table/
  2. Change 
    -let sortDirection: Lowercase<keyof typeof SortValue> = 'ascending';
+let sortDirection: Lowercase<keyof typeof SortValue> = 'descending';
  3. See arrow in ascending mode (should be descending).
  4. Click arrow to change direction - sortDirection is set to ascending but icon does not change (now is in sync with variable).

Expected behavior Icon state should be initially synchronized to sortDirection.

Desktop (please complete the following information):

pboguslawski commented 1 year ago

Dirty workaround that seems to work is to add class mdc-data-table__header-cell--sorted-descending to every sortable table header cell when initial sortDirection is descending; i.e.

<DataTable>
<Head>
<Row>
<Cell columnId="name" class={initialSortDirection === 'descending' ? 'mdc-data-table__header-cell--sorted-descending' : ''}>
[...]
</Cell>