From b21b044193ff3e21f6eb2e3451112789f04d9c2c Mon Sep 17 00:00:00 2001
From: Explicit12 <explicit1@tutanota.com>
Date: Wed, 19 Feb 2025 16:32:49 +0200
Subject: [PATCH 1/2] Added margin fro first table divider and improved docs

---
 src/ui.data-table/config.ts            |  4 +--
 src/ui.data-table/storybook/stories.ts | 40 +++++++++++++++++---------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/ui.data-table/config.ts b/src/ui.data-table/config.ts
index 5fdc4a72..42edcb5e 100644
--- a/src/ui.data-table/config.ts
+++ b/src/ui.data-table/config.ts
@@ -49,7 +49,7 @@ export default /*tw*/ {
   bodyRowBeforeChecked: "{>bodyRowChecked} !p-0",
   bodyRowBeforeCell: "{>bodyCellBase} py-1",
   bodyRowAfter: "!p-0",
-  bodyRowDateDivider: "",
+  bodyRowDateDivider: "group/row-divider",
   bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
   bodyCellBase: {
     base: "p-4 truncate align-top",
@@ -76,7 +76,7 @@ export default /*tw*/ {
   },
   bodyCheckbox: "{UCheckbox}",
   bodyDateDivider: {
-    base: "{UDivider}",
+    base: "{UDivider} group-first/row-divider:mt-2",
     label: "py-0",
   },
   bodySelectedDateDivider: {
diff --git a/src/ui.data-table/storybook/stories.ts b/src/ui.data-table/storybook/stories.ts
index 93064e8d..c8f56294 100644
--- a/src/ui.data-table/storybook/stories.ts
+++ b/src/ui.data-table/storybook/stories.ts
@@ -64,16 +64,30 @@ export default {
   },
 } as Meta;
 
-function getDateDividerRow() {
-  return {
-    id: getRandomId(),
-    isChecked: false,
-    rowDate: new Date().toString(),
-    key_1: "Info",
-    key_2: "Statistics",
-    key_3: "Reports",
-    key_4: "Discounts",
-  };
+function getDateDividerRow(rowAmount: number) {
+  return Array(10)
+    .fill({})
+    .map((_, index) => {
+      let rowDate = new Date().toString();
+
+      if (index > Math.round(rowAmount / 2)) {
+        const date = new Date();
+
+        date.setFullYear(date.getFullYear() + 1);
+
+        rowDate = date.toDateString();
+      }
+
+      return {
+        id: getRandomId(),
+        isChecked: false,
+        rowDate,
+        key_1: "Info",
+        key_2: "Statistics",
+        key_3: "Reports",
+        key_4: "Discounts",
+      };
+    });
 }
 
 function getNestedRow() {
@@ -327,13 +341,11 @@ export const Compact = DefaultTemplate.bind({});
 Compact.args = { compact: true };
 
 export const DateDivider = DefaultTemplate.bind({});
-DateDivider.args = { dateDivider: true, row: getDateDividerRow };
+DateDivider.args = { dateDivider: true, rows: getDateDividerRow(10) };
 
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
 DateDividerCustomLabel.args = {
-  rows: Array(10)
-    .fill({})
-    .map(() => getDateDividerRow()),
+  rows: getDateDividerRow(10),
   dateDivider: [
     {
       date: new Date().toString(),

From 8b98e672c77065cee5372c1890a6d8faeefaa098 Mon Sep 17 00:00:00 2001
From: Explicit12 <explicit1@tutanota.com>
Date: Thu, 20 Feb 2025 10:58:55 +0200
Subject: [PATCH 2/2] Hidden first date divider and fixed stories

---
 src/ui.data-table/config.ts            | 4 ++--
 src/ui.data-table/storybook/stories.ts | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/ui.data-table/config.ts b/src/ui.data-table/config.ts
index 42edcb5e..558d3a21 100644
--- a/src/ui.data-table/config.ts
+++ b/src/ui.data-table/config.ts
@@ -49,7 +49,7 @@ export default /*tw*/ {
   bodyRowBeforeChecked: "{>bodyRowChecked} !p-0",
   bodyRowBeforeCell: "{>bodyCellBase} py-1",
   bodyRowAfter: "!p-0",
-  bodyRowDateDivider: "group/row-divider",
+  bodyRowDateDivider: "first:hidden",
   bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
   bodyCellBase: {
     base: "p-4 truncate align-top",
@@ -76,7 +76,7 @@ export default /*tw*/ {
   },
   bodyCheckbox: "{UCheckbox}",
   bodyDateDivider: {
-    base: "{UDivider} group-first/row-divider:mt-2",
+    base: "{UDivider}",
     label: "py-0",
   },
   bodySelectedDateDivider: {
diff --git a/src/ui.data-table/storybook/stories.ts b/src/ui.data-table/storybook/stories.ts
index c8f56294..b9bcacc5 100644
--- a/src/ui.data-table/storybook/stories.ts
+++ b/src/ui.data-table/storybook/stories.ts
@@ -65,7 +65,7 @@ export default {
 } as Meta;
 
 function getDateDividerRow(rowAmount: number) {
-  return Array(10)
+  return Array(rowAmount)
     .fill({})
     .map((_, index) => {
       let rowDate = new Date().toString();
@@ -344,11 +344,14 @@ export const DateDivider = DefaultTemplate.bind({});
 DateDivider.args = { dateDivider: true, rows: getDateDividerRow(10) };
 
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
+
+const dateDividerCustomLabelRows = getDateDividerRow(10);
+
 DateDividerCustomLabel.args = {
-  rows: getDateDividerRow(10),
+  rows: dateDividerCustomLabelRows,
   dateDivider: [
     {
-      date: new Date().toString(),
+      date: dateDividerCustomLabelRows.at(6)!.rowDate,
       label: "Custom label for specific date",
       config: { label: "!text-orange-400", divider: "!border-orange-300" },
     },