Adjust table sort tags to spans

CHANGELOG.md

@@ -12,7 +12,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `Fixed` for any bug fixes.
 - `Security`
 
-## [3.10.1] - 2021-12-08
+## [3.10.2] - 2021-02-26
+- https://github.com/teamsnap/teamsnap-ui/pull/504/files
+- `Updated` Table headers to be spans instead of anchors
+
+## [3.10.1] - 2020-12-08
 - https://github.com/teamsnap/teamsnap-ui/pull/429
 - `Updated` React to 17
 - `Fixed` event delegation in Popup components for breaking React 17 changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamsnap/teamsnap-ui",
-  "version": "3.10.1",
+  "version": "3.10.2",
   "description": "a CSS component library for TeamSnap",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/js/components/Table/Table.tsx

@@ -141,10 +141,8 @@ class Table extends React.PureComponent<
     return { items, sortByColumn, sortByReverse };
   };
 
-  handleSortClick = (e) => {
-    e.preventDefault();
+  handleSortClick = (sortName) => {
     const { items } = this.state;
-    const sortName = e.currentTarget.getAttribute("href");
 
     const sortDirection =
       sortName === this.state.sortByColumn ? !this.state.sortByReverse : false;
@@ -192,17 +190,20 @@ class Table extends React.PureComponent<
     );
 
     return (
-      <TextLink
-        location={column.name}
-        onClick={this.handleSortClick}
-        mods={textLinkMods}
+      <span
+        role="button"
+        style={{cursor: "pointer"}}
+        onClick={() => {
+          this.handleSortClick(column.name);
+        }}
+        className={textLinkMods}
       >
         {this.renderSortLabel(column.label)}
         <div className="u-colorGrey u-fontSizeXs u-spaceLeftXs">
           <Icon name="up" mods={ascLinkMods} />
           <Icon name="down" mods={descLinkMods} />
         </div>
-      </TextLink>
+      </span>
     );
   };