Entities table

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surfnet/sds",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "description": "SURF Design System for React",
   "main": "cjs/index.js",
   "module": "esm/index.js",

src/common/utils.ts

@@ -19,7 +19,7 @@ export function isEmpty(obj: any) {
     if (typeof obj === "string") {
         return obj.trim().length === 0;
     }
-    if (obj && obj.getTime) {
+    if (obj && obj.getTime && typeof obj.getTime === "function") {
         return obj.getTime() !== obj.getTime();
     }
     if (typeof obj === "object") {
@@ -36,3 +36,47 @@ export function pseudoGuid() {
     return (crypto.randomUUID && typeof crypto.randomUUID === "function" && crypto.randomUUID()) ||
         Math.round((new Date().getTime() * Math.random() * 1000)).toString()
 }
+
+export function sortObjects(objects: Array<Object>, attribute: string, reverse: boolean) {
+    return [...objects].sort((a, b) => {
+        const val1 = valueForSort(attribute, a);
+        const val2 = valueForSort(attribute, b);
+        if (typeof val1 === "number" && typeof val2 === "number") {
+            return (val1 - val2) * (reverse ? -1 : 1);
+        }
+        const aS = val1.toString();
+        const bS = val2.toString();
+        if (aS.length === 0) {
+            return (reverse ? -1 : 1);
+        }
+        if (bS.length === 0) {
+            return (reverse ? 1 : -1);
+        }
+        return aS.localeCompare(bS) * (reverse ? -1 : 1);
+    });
+}
+
+export function valueForSort(attribute: string, obj: Object) : any{
+    if (attribute.endsWith("_date")) {
+        // @ts-ignore
+        return obj[attribute] || Number.MAX_SAFE_INTEGER;
+    }
+    // @ts-ignore
+    const val = obj[attribute];
+    if (val.getTime && typeof val.getTime === "function") {
+        return val.getTime();
+    }
+    if (!isEmpty(val)) {
+        return val;
+    }
+    const parts = attribute.replace(/__/g, ".").split(".");
+    const res = parts.reduce((acc, e) => {
+        if (isEmpty(acc)) {
+            return "";
+        }
+        // @ts-ignore
+        return acc[e];
+    }, obj);
+    return res || "";
+
+}

src/components/Pagination/algorithm.test.tsx

@@ -27,7 +27,5 @@ describe("Pagination algorithm", () => {
         for (let i = 1, l = 20; i <= l; i++) {
             expect(expectations[i - 1]).toEqual(pagination(i, l));
         }
-
-
     });
 });

src/components/Table/Table.scss

@@ -0,0 +1,11 @@
+.sds--entities  {
+
+    .entities-search {
+        display: flex;
+        gap: 40px;
+        div.search {
+            margin-left: auto;
+            min-width: 140px;
+        }
+    }
+}

src/components/Table/Table.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import {ReactComponent as ArrowDownIcon} from "../../icons/functional-icons/arrow-down-2.svg";
+import Table, {defaultTableProps} from './Table';
+import Button from "../Button/Button";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'ReactComponentLibrary/Table',
+    component: Table,
+    args: {
+        ...defaultTableProps
+    }
+} as Meta<typeof Table>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: StoryFn<typeof Table> = (args) => <Table {...args} />;
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+    newEntityFunc: () => alert("New entity"),
+    searchAttributes: ["name"],
+    children: <Button txt={"Custom children"}/>,
+    columns: [
+        {key: "name", hasLink: false, showHeader: true},
+        {key: "name", hasLink: false, mapper: (obj: any) => obj.birthday.toDateString(), showHeader: true}
+    ],
+    title: "Persons",
+    defaultSort: "name",
+    newLabel: "New Person",
+    searchPlaceHolder: "Search...",
+    entities:[
+        {name:"John Doe", birthday: new Date("1978-04-09")},
+        {name:"Mary Doe", birthday: new Date("1977-04-09")},
+        {name:"Paul Doe", birthday: new Date("1979-04-09")}
+    ],
+};
+

src/components/Table/Table.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import {render} from "@testing-library/react";
+
+import Table,{defaultTableProps} from "./Table";
+
+describe("Table", () => {
+    test("renders the Table component", () => {
+        render(<Table entities={[]} defaultSort={"name"} columns={[]}/>);
+    });
+});