Repository: grommet/grommet (JavaScript)

Issue:
DataTable: sorting arrow icon doesn't change in header when using navigation
<!--- Provide a general summary of the issue in the Title above -->
We store sorting parameters in the URL (so that you can share the URL)

### Expected Behavior

1. Click on the table header to sort (different columns several times):
 - The URL has changed, arrows in the header should be consistent with the new URL info
2. Use browser navigation arrows (back/forward)
 - The URL has changed, arrows in the header should be consistent with the new URL info


<!--- Tell us what should happen -->

### Actual Behavior
1. Click on the table header to sort (different columns several times):
 - The URL has changed, arrows in the header should be consistent with the new URL info
2. Use browser navigation arrows (back/forward)
 - The URL has changed, but there are no changes in the table headers, arrows icon state does not change

<!--- Tell us what happens instead -->


### URL, screen shot, or Codepen exhibiting the issue

  -- Here's a Codesandbox template that serves as a nice starting point
  -- for demonstrating an issue: https://codesandbox.io/s/morning-glade-5c6s38?file=/src/App.js

<img width="469" alt="Screenshot 2022-08-14 at 21 44 25" src="https://user-images.githubusercontent.com/17574496/184552506-15664064-8455-4cf7-8241-07318442cc40.png">


- Grommet version: 2.25.1



Discussion:
Hi @vldmr1986 -- when using the `sort` prop, if you indicate `external: true` then the docs indicate that "the caller will take care of sorting the 'data' via 'onSort': https://v2.grommet.io/datatable#sort, but in your codesandbox you were not sorting the data.

If you'd like DataTable to handle the sorting for you, you can remove `external: true` from your sort prop like this: https://codesandbox.io/s/friendly-microservice-ggt1q4?file=/src/App.js

Can you let me know if this solves your issue?
@taysea the problem is neither in the data nor in their sorting The problem is in the incorrect arrows in the header.
Pay attention to the property sort={{ property, direction }} 
<img width="1408" alt="Screenshot 2022-08-29 at 22 16 28" src="https://user-images.githubusercontent.com/17574496/187291555-f008834f-c8ef-4b54-bc0c-8aa1301b5f5f.png">

I 
I noticed that the behavior of the arrows only changes if you manually click on the header. but if you change the sort property through the state or navigation, the arrow does not react.

Assumption: The Table uses the external sort property on componentWillMount only, and then defines the internal local state of these values. So when the Table component is mounted, and the "sort" property is changed, the component won't rerender

If so, the solution could be something like that:
```
useEffect(()=>{
// re-setSate local sort ptoperty inside Table component
}, [sort.direction, sort.property])
```
Thanks for clarifying. From your initial code sandbox, I was able to see the arrow change when adjusting the search params in the url -- however, I am now able to replicate the issue with state. I am looking into a solution.
Once you adjust the search params directly in the URL (manual), it will cause reload the page, so it will trigger componentWillMount (so sort will be correct).
But, if you will use useSearchParams hook(react-router-dom), it won't reload the whole page.
Steps to reproduce:
1. Click on the header "B"
2. Click on the "backward" arrow navigation button from the built-in browser

 however,  the fix with the local state should fix navigation as well



Patch:
diff --git a/src/js/components/DataTable/DataTable.js b/src/js/components/DataTable/DataTable.js
index 6c02fd954f2..46dfc39560e 100644
--- a/src/js/components/DataTable/DataTable.js
+++ b/src/js/components/DataTable/DataTable.js
@@ -108,6 +108,9 @@ const DataTable = ({
 
   // which column we are sorting on, with direction
   const [sort, setSort] = useState(sortProp || {});
+  useEffect(() => {
+    if (sortProp) setSort(sortProp);
+  }, [sortProp]);
 
   // the data filtered and sorted, if needed
   // Note: onUpdate mode expects the data to be passed


Test patch:
diff --git a/src/js/components/DataTable/__tests__/DataTable-test.js b/src/js/components/DataTable/__tests__/DataTable-test.js
index 65c0d6fec46..b87b321b309 100644
--- a/src/js/components/DataTable/__tests__/DataTable-test.js
+++ b/src/js/components/DataTable/__tests__/DataTable-test.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import 'jest-styled-components';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 
 import { Grommet } from '../../Grommet';
 import { Box } from '../../Box';
+import { Button } from '../../Button';
 import { Text } from '../../Text';
 import { DataTable } from '..';
 
@@ -272,6 +273,43 @@ describe('DataTable', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('sort controlled', () => {
+    const Test = () => {
+      const [sort, setSort] = React.useState({
+        property: 'a',
+        direction: 'asc',
+      });
+
+      return (
+        <Grommet>
+          <Button
+            label="Sort data"
+            onClick={() => setSort({ property: 'a', direction: 'desc' })}
+          />
+          <DataTable
+            columns={[
+              { property: 'a', header: 'A' },
+              { property: 'b', header: 'B' },
+            ]}
+            data={[
+              { a: 'zero', b: 0 },
+              { a: 'one', b: 1 },
+              { a: 'two', b: 2 },
+            ]}
+            sort={sort}
+          />
+        </Grommet>
+      );
+    };
+    const { asFragment } = render(<Test />);
+    expect(asFragment()).toMatchSnapshot();
+
+    const sortButton = screen.getByRole('button', { name: 'Sort data' });
+    fireEvent.click(sortButton);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('sort nested object', () => {
     const { container, getByText } = render(
       <Grommet>
diff --git a/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index f08c9409f03..acc375f3904 100644
--- a/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/src/js/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2930,12 +2930,6 @@ exports[`DataTable custom theme 1`] = `
   border-radius: 4px;
 }
 
-.c10 {
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: bold;
-}
-
 .c11 {
   position: relative;
 }
@@ -2954,6 +2948,12 @@ exports[`DataTable custom theme 1`] = `
   transform: translateY(-50%);
 }
 
+.c10 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
 .c7 {
   display: inline-block;
   box-sizing: border-box;
@@ -18333,17 +18333,6 @@ exports[`DataTable resizeable 1`] = `
   width: 12px;
 }
 
-.c6 {
-  font-size: 18px;
-  line-height: 24px;
-}
-
-.c18 {
-  font-size: 18px;
-  line-height: 24px;
-  font-weight: bold;
-}
-
 .c8 {
   position: relative;
 }
@@ -18362,6 +18351,17 @@ exports[`DataTable resizeable 1`] = `
   transform: translateY(-50%);
 }
 
+.c6 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.c18 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
 .c3 {
   margin: 0;
   padding: 0;
@@ -36471,6 +36471,966 @@ exports[`DataTable sort 1`] = `
 </div>
 `;
 
+exports[`DataTable sort controlled 1`] = `
+<DocumentFragment>
+  .c11 {
+  display: inline-block;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  fill: #666666;
+  stroke: #666666;
+}
+
+.c11 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c11 *:not([stroke])[fill="none"] {
+  stroke-width: 0;
+}
+
+.c11 *[stroke*="#"],
+.c11 *[STROKE*="#"] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c11 *[fill-rule],
+.c11 *[FILL-RULE],
+.c11 *[fill*="#"],
+.c11 *[FILL*="#"] {
+  fill: inherit;
+  stroke: none;
+}
+
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c10 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  width: 6px;
+}
+
+.c9 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.c15 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+.c1 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  border: 2px solid #7D4CDB;
+  border-radius: 18px;
+  color: #444444;
+  padding: 4px 22px;
+  font-size: 18px;
+  line-height: 24px;
+  -webkit-transition-property: color,background-color,border-color,box-shadow;
+  transition-property: color,background-color,border-color,box-shadow;
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+
+.c1:hover {
+  box-shadow: 0px 0px 0px 2px #7D4CDB;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c1:focus > circle,
+.c1:focus > ellipse,
+.c1:focus > line,
+.c1:focus > path,
+.c1:focus > polygon,
+.c1:focus > polyline,
+.c1:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c1:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c1:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c1:focus:not(:focus-visible) > circle,
+.c1:focus:not(:focus-visible) > ellipse,
+.c1:focus:not(:focus-visible) > line,
+.c1:focus:not(:focus-visible) > path,
+.c1:focus:not(:focus-visible) > polygon,
+.c1:focus:not(:focus-visible) > polyline,
+.c1:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c1:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
+.c6 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c6:focus > circle,
+.c6:focus > ellipse,
+.c6:focus > line,
+.c6:focus > path,
+.c6:focus > polygon,
+.c6:focus > polyline,
+.c6:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c6:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c6:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible) > circle,
+.c6:focus:not(:focus-visible) > ellipse,
+.c6:focus:not(:focus-visible) > line,
+.c6:focus:not(:focus-visible) > path,
+.c6:focus:not(:focus-visible) > polygon,
+.c6:focus:not(:focus-visible) > polyline,
+.c6:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
+.c4 {
+  margin: 0;
+  padding: 0;
+  font-weight: inherit;
+  text-align: inherit;
+  text-align: start;
+  border-bottom: solid 1px rgba(0,0,0,0.33);
+  padding: 0px;
+}
+
+.c13 {
+  margin: 0;
+  padding: 0;
+  font-weight: inherit;
+  text-align: inherit;
+  text-align: start;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.c2 {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: inherit;
+}
+
+.c3 {
+  position: relative;
+  border-spacing: 0;
+  border-collapse: separate;
+  height: 100%;
+}
+
+.c12:focus {
+  outline: 2px solid #6FFFB0;
+}
+
+.c12:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.c7 {
+  padding: 6px 12px;
+}
+
+@media only screen and (max-width:768px) {
+  .c10 {
+    width: 3px;
+  }
+}
+
+<div
+    class="c0"
+  >
+    <button
+      class="c1"
+      type="button"
+    >
+      Sort data
+    </button>
+    <table
+      class="c2 c3"
+    >
+      <thead
+        class="StyledTable__StyledTableHeader-sc-1m3u5g-4 StyledDataTable__StyledDataTableHeader-sc-xrlyjm-4"
+      >
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c4 "
+            scope="col"
+          >
+            <div
+              class="c5"
+            >
+              <button
+                class="c6 c7"
+                type="button"
+              >
+                <div
+                  class="c8"
+                >
+                  <span
+                    class="c9"
+                  >
+                    A
+                  </span>
+                  <div
+                    class="c10"
+                  />
+                  <svg
+                    aria-label="FormUp"
+                    class="c11"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="m18 15-6-6-6 6"
+                      fill="none"
+                      stroke="#000"
+                      stroke-width="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </th>
+          <th
+            class="c4 "
+            scope="col"
+          >
+            <div
+              class="c5"
+            >
+              <button
+                class="c6 c7"
+                type="button"
+              >
+                <div
+                  class="c8"
+                >
+                  <span
+                    class="c9"
+                  >
+                    B
+                  </span>
+                </div>
+              </button>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="StyledTable__StyledTableBody-sc-1m3u5g-3 c12"
+      >
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c13 "
+            scope="row"
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c15"
+              >
+                one
+              </span>
+            </div>
+          </th>
+          <td
+            class="c13 "
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c9"
+              >
+                1
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c13 "
+            scope="row"
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c15"
+              >
+                two
+              </span>
+            </div>
+          </th>
+          <td
+            class="c13 "
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c9"
+              >
+                2
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c13 "
+            scope="row"
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c15"
+              >
+                zero
+              </span>
+            </div>
+          </th>
+          <td
+            class="c13 "
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c9"
+              >
+                0
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DataTable sort controlled 2`] = `
+<DocumentFragment>
+  .c11 {
+  display: inline-block;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  fill: #666666;
+  stroke: #666666;
+}
+
+.c11 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c11 *:not([stroke])[fill="none"] {
+  stroke-width: 0;
+}
+
+.c11 *[stroke*="#"],
+.c11 *[STROKE*="#"] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c11 *[fill-rule],
+.c11 *[FILL-RULE],
+.c11 *[fill*="#"],
+.c11 *[FILL*="#"] {
+  fill: inherit;
+  stroke: none;
+}
+
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c10 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  width: 6px;
+}
+
+.c9 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.c15 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+.c1 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  border: 2px solid #7D4CDB;
+  border-radius: 18px;
+  color: #444444;
+  padding: 4px 22px;
+  font-size: 18px;
+  line-height: 24px;
+  -webkit-transition-property: color,background-color,border-color,box-shadow;
+  transition-property: color,background-color,border-color,box-shadow;
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+}
+
+.c1:hover {
+  box-shadow: 0px 0px 0px 2px #7D4CDB;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c1:focus > circle,
+.c1:focus > ellipse,
+.c1:focus > line,
+.c1:focus > path,
+.c1:focus > polygon,
+.c1:focus > polyline,
+.c1:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c1:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c1:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c1:focus:not(:focus-visible) > circle,
+.c1:focus:not(:focus-visible) > ellipse,
+.c1:focus:not(:focus-visible) > line,
+.c1:focus:not(:focus-visible) > path,
+.c1:focus:not(:focus-visible) > polygon,
+.c1:focus:not(:focus-visible) > polyline,
+.c1:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c1:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
+.c6 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+  height: 100%;
+}
+
+.c6:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c6:focus > circle,
+.c6:focus > ellipse,
+.c6:focus > line,
+.c6:focus > path,
+.c6:focus > polygon,
+.c6:focus > polyline,
+.c6:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c6:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c6:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible) > circle,
+.c6:focus:not(:focus-visible) > ellipse,
+.c6:focus:not(:focus-visible) > line,
+.c6:focus:not(:focus-visible) > path,
+.c6:focus:not(:focus-visible) > polygon,
+.c6:focus:not(:focus-visible) > polyline,
+.c6:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
+.c4 {
+  margin: 0;
+  padding: 0;
+  font-weight: inherit;
+  text-align: inherit;
+  text-align: start;
+  border-bottom: solid 1px rgba(0,0,0,0.33);
+  padding: 0px;
+}
+
+.c13 {
+  margin: 0;
+  padding: 0;
+  font-weight: inherit;
+  text-align: inherit;
+  text-align: start;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.c2 {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: inherit;
+}
+
+.c3 {
+  position: relative;
+  border-spacing: 0;
+  border-collapse: separate;
+  height: 100%;
+}
+
+.c12:focus {
+  outline: 2px solid #6FFFB0;
+}
+
+.c12:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.c7 {
+  padding: 6px 12px;
+}
+
+@media only screen and (max-width:768px) {
+  .c10 {
+    width: 3px;
+  }
+}
+
+<div
+    class="c0"
+  >
+    <button
+      class="c1"
+      type="button"
+    >
+      Sort data
+    </button>
+    <table
+      class="c2 c3"
+    >
+      <thead
+        class="StyledTable__StyledTableHeader-sc-1m3u5g-4 StyledDataTable__StyledDataTableHeader-sc-xrlyjm-4"
+      >
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c4 "
+            scope="col"
+          >
+            <div
+              class="c5"
+            >
+              <button
+                class="c6 c7"
+                type="button"
+              >
+                <div
+                  class="c8"
+                >
+                  <span
+                    class="c9"
+                  >
+                    A
+                  </span>
+                  <div
+                    class="c10"
+                  />
+                  <svg
+                    aria-label="FormDown"
+                    class="c11"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="m18 9-6 6-6-6"
+                      fill="none"
+                      stroke="#000"
+                      stroke-width="2"
+                    />
+                  </svg>
+                </div>
+              </button>
+            </div>
+          </th>
+          <th
+            class="c4 "
+            scope="col"
+          >
+            <div
+              class="c5"
+            >
+              <button
+                class="c6 c7"
+                type="button"
+              >
+                <div
+                  class="c8"
+                >
+                  <span
+                    class="c9"
+                  >
+                    B
+                  </span>
+                </div>
+              </button>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="StyledTable__StyledTableBody-sc-1m3u5g-3 c12"
+      >
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c13 "
+            scope="row"
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c15"
+              >
+                zero
+              </span>
+            </div>
+          </th>
+          <td
+            class="c13 "
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c9"
+              >
+                0
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c13 "
+            scope="row"
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c15"
+              >
+                two
+              </span>
+            </div>
+          </th>
+          <td
+            class="c13 "
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c9"
+              >
+                2
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="StyledTable__StyledTableRow-sc-1m3u5g-2 "
+        >
+          <th
+            class="c13 "
+            scope="row"
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c15"
+              >
+                one
+              </span>
+            </div>
+          </th>
+          <td
+            class="c13 "
+          >
+            <div
+              class="c14"
+            >
+              <span
+                class="c9"
+              >
+                1
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`DataTable sort external 1`] = `
 .c10 {
   display: inline-block;