Improve positioning of sort indicator

[gwww]

Before submitting the PR:

• Does your PR reference an issue? If not, please chat to the team on Discord or GitHub before submission.
• Did you update and run tests before submission using npm run test?
• Does your branch follow our naming convention? If not, please amend the branch name using branch -m new-branch-name
• Did you update documentation related to your new feature or changes?

What does your PR address?

When the sort header of a Data Table is clicked the columns shift because of the addition/removal of the table-sort-asc or table-sort-dsc class. Adding position absolute prevents the class change affecting column width.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
skeleton-docs	❌ Failed (Inspect)		Jan 16, 2023 at 1:19AM (UTC)

[gwww]

Well, not my best first PR! In more testing the absolute worked... just it was in both the x and y axis. I'll put this as draft for now and see if I can amp up my CSS guru from within.

[endigo9740]

@gwww This is on my list to review - just a very busy week so it may take some time.

[gwww]

Thx Chris. It doesn't work as it is. I've been looking for other solutions. Most seem to be more complex and require both code and possibly markup changes to work. When I've found something I move this out of draft. And, I don't want to distract you!

[endigo9740]

I'm actually working through all the Tailwind styled elements in the library now to clean up and refine things. If all else fails I can probably adjust this as I go:

• Polish Pass: Tailwind Elements #837

[gwww]

Here is what I ended up doing in my code to get it working such that the sort indicators don't cause the column width to change. It took much longer than I hoped as I believe I ran into a SvelteKit bug (which is next on my list to confirm) where the attribute specific CSS classes were optimized away (the last two classes, below). I ended up moving the CSS to a .css file to fix.

My repo is here if you want to look at the table I built. I can put the CSS/TS fix into a PR if you wish but figure I would let you do whatever refactoring you are doing. I also recognize the DataTable is post 1.0, so also feel free to just close this and track it through #538.

CSS:

/* Styles placed in separate file as SvelteKit bug optimizes out the last two classes */
/* TODO: convert to TailwindCSS */
.table-asc::after {
  content: '↓';
  margin-left: 0.5rem;
  visibility: hidden;
  opacity: 50%;
}
.table-dsc::after {
  content: '↑';
  margin-left: 0.5rem;
  visibility: hidden;
  opacity: 50%;
}
.table-asc[aria-sort='ascending']::after {
  visibility: visible;
}
.table-dsc[aria-sort='descending']::after {
  visibility: visible;
}

TS; my replacement for the DataTable on:click handler:

  function handleSortEvent(e: Event) {
    if (!(e.target instanceof Element)) return;
    const sortTarget = e.target as HTMLElement;
    const node = sortTarget.closest('thead')!;

    // Set desired new sort order
    const sortAscending = sortTarget.getAttribute('aria-sort') !== 'ascending';
    const sortColumn = sortTarget.getAttribute('data-sort');
    if (!sortColumn) return;

    node.querySelectorAll<HTMLElement>(`.${classAsc}, .${classDsc}`).forEach((el) => {
      el.setAttribute('aria-sort', 'none');
    });

    sortTarget.classList.remove(classAsc);
    sortTarget.classList.remove(classDsc);
    sortTarget.classList.add(sortAscending ? classAsc : classDsc);
    sortTarget.setAttribute('aria-sort', sortAscending ? 'ascending' : 'descending');

    sortTable(sortTarget.closest('table')!, Number(sortColumn), sortAscending);
  }

[endigo9740]

I'm going to close out this PR as a fix has been implemented as part of:

• Polish Pass: Tailwind Elements #837

See the tables.css section - I've included a note related to this. Thanks!