fix(Table): invalid sort indicator location when sticky is enabled (#510

)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
- Updated the `Sortable` table component to require cell properties as
strings only.

- **Style**
- Enhanced visual focus handling in the `ButtonSort` component by
adjusting border transparency settings.

- **Tests**
- Updated tests to reflect style changes in the `ButtonSort` component.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/documentation/src/Components/Table.stories.tsx

@@ -330,7 +330,7 @@ export const WithRowNumbers: Story<any> = (args) => {
 
 export const Sortable: Story<any> = (args) => {
 	const [sortState, setSortState] = useState<{
-		cell: string | number;
+		cell: string;
 		direction:
 			| typeof TableCellSortDirections.ASC
 			| typeof TableCellSortDirections.DESC

packages/ui-components/src/components/private/ButtonSort.tsx

@@ -58,10 +58,10 @@ export const ButtonSort = React.forwardRef<HTMLButtonElement, ButtonSortProps>(
 			? clsx(
 					"relative",
 					"focus-within:static",
+					"focus-within:after:border-transparent",
 					"after:absolute",
 					"after:content-['']",
 					"after:border-b-2",
-					"after:z-[-1px]",
 					"after:bottom-[-4px]",
 					"after:left-0",
 					"after:right-0",

packages/ui-components/src/components/private/__tests__/ButtonSort.test.tsx

@@ -192,10 +192,10 @@ describe("ButtonSort modifiers", () => {
 		if (parent) {
 			expectToHaveClasses(parent, [
 				"focus-within:static",
+				"focus-within:after:border-transparent",
 				"after:absolute",
 				"after:content-['']",
 				"after:border-b-2",
-				"after:z-[-1px]",
 				"after:bottom-[-4px]",
 				"after:left-0",
 				"after:right-0",
@@ -217,10 +217,10 @@ describe("ButtonSort modifiers", () => {
 		if (parent) {
 			expectToHaveClasses(parent, [
 				"focus-within:static",
+				"focus-within:after:border-transparent",
 				"after:absolute",
 				"after:content-['']",
 				"after:border-b-2",
-				"after:z-[-1px]",
 				"after:bottom-[-4px]",
 				"after:left-0",
 				"after:right-0",