feat: add automatic date sort

abelflopes · Mar 6, 2024 · 1fb0097 · 1fb0097
1 parent 7797891
commit 1fb0097
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/packages/components/data-table/src/utils/sort-data.ts b/packages/components/data-table/src/utils/sort-data.ts
@@ -19,6 +19,12 @@ export const sortData = <T extends TableData>(
       // if both are numbers
       valueA = Number(valueA);
       valueB = Number(valueB);
+    } else if (
+      [valueA, valueB].every((i) => typeof i === "string" && JSON.stringify(new Date(i)) !== "null")
+    ) {
+      // if both are dates
+      valueA = new Date(String(valueA)).getTime();
+      valueB = new Date(String(valueB)).getTime();
     } else if ([valueA, valueB].every(React.isValidElement)) {
       // if both are react elements
       valueA = (componentToText(valueA) ?? "").trim().toLowerCase();

diff --git a/packages/docs/stories/src/data-table.stories.tsx b/packages/docs/stories/src/data-table.stories.tsx
@@ -46,7 +46,7 @@ export const AutoHeaders: Story = {
   args: {
     skin: "bordered",
     autoHeaders: true,
-    data: Object.keys(Array.from(Array.from({ length: 10 }))).map(() => ({
+    data: Object.keys(Array.from(Array.from({ length: 10 }))).map((i) => ({
       "some_column": faker.date.future().toLocaleDateString(),
       "otherColumn": faker.company.buzzNoun(),
       "last-column": <Chip>{faker.commerce.price()}</Chip>,
@@ -58,11 +58,21 @@ export const Sortable: Story = {
   args: {
     skin: "bordered",
     autoHeaders: true,
-    sortable: ["otherColumn", "last-column"],
-    data: Object.keys(Array.from(Array.from({ length: 10 }))).map(() => ({
-      "some_column": faker.date.future().toLocaleDateString(),
-      "otherColumn": faker.company.buzzNoun(),
-      "last-column": <Chip>{faker.commerce.price()}</Chip>,
-    })),
+    sortable: true,
+    data: Object.keys(Array.from(Array.from({ length: 10 }))).map(() => {
+      const date = new Date(faker.date.future()).toString();
+
+      return {
+        name: faker.company.buzzNoun(),
+        date,
+        Number: Math.round(Math.random() * 100),
+        Price: (
+          <Chip>
+            {faker.commerce.price()}
+            {faker.finance.currency().symbol}
+          </Chip>
+        ),
+      };
+    }),
   },
 };