@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-a131264d

package/content/Table/__stories__/WithFloatingScroll.js

@@ -11,13 +11,13 @@ exports["default"] = exports.WithFloatingScroll = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Table = require("@digigov/ui/content/Table");
+var _ = require("./..");
 
-var _TableFloatingScroll = require("@digigov/ui/content/Table/TableFloatingScroll");
+var _TableFloatingScroll = require("../TableFloatingScroll");
 
-var _Dropdown = require("@digigov/ui/navigation/Dropdown");
+var _Dropdown = require("../../../navigation/Dropdown");
 
-var _NavList = _interopRequireWildcard(require("@digigov/ui/navigation/NavList"));
+var _NavList = _interopRequireWildcard(require("../../../navigation/NavList"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -58,9 +58,9 @@ var data = new Array(20).fill({
   last_login_agent: 'Firefox'
 });
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Table.TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+var _ref = /*#__PURE__*/_react["default"].createElement(_.TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, null, /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_.TableDataCell, null, /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
   "float": true,
   align: "right",
   placement: "bottom"
@@ -75,15 +75,15 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, n
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
 
 var WithFloatingScroll = function WithFloatingScroll() {
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TableFloatingScroll.TableFloatingScroll, null, /*#__PURE__*/_react["default"].createElement(_Table.Table, null, /*#__PURE__*/_react["default"].createElement(_Table.TableHead, null, /*#__PURE__*/_react["default"].createElement(_Table.TableRow, null, Object.keys(data[0]).map(function (key) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableHeadCell, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TableFloatingScroll.TableFloatingScroll, null, /*#__PURE__*/_react["default"].createElement(_.Table, null, /*#__PURE__*/_react["default"].createElement(_.TableHead, null, /*#__PURE__*/_react["default"].createElement(_.TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableHeadCell, {
       key: key
     }, labels[key]);
-  }), _ref)), /*#__PURE__*/_react["default"].createElement(_Table.TableBody, null, data && data.map(function (dt, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableRow, {
+  }), _ref)), /*#__PURE__*/_react["default"].createElement(_.TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableRow, {
       key: index
     }, Object.keys(dt).map(function (key) {
-      return /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, {
+      return /*#__PURE__*/_react["default"].createElement(_.TableDataCell, {
         key: key
       }, dt[key]);
     }), _ref2);

package/content/Table/__stories__/WithFloatingScroll.mjs

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from "./..";
+import { TableFloatingScroll } from "../TableFloatingScroll";
+import { Dropdown, DropdownButton, DropdownContent } from "../../../navigation/Dropdown";
+import NavList, { NavListItemAction } from "../../../navigation/NavList";
+var labels = {
+  name: 'Ονοματεπώνυμο',
+  email: 'Email',
+  phone: 'Τηλέφωνο',
+  role: 'Ρόλος',
+  status: 'Κατάσταση',
+  actions: 'Ενέργειες',
+  at: 'Αριθμός Ταυτότητας',
+  zip: 'Ταχυδρομικός Κώδικας',
+  address: 'Διεύθυνση',
+  city: 'Πόλη',
+  country: 'Χώρα',
+  active: 'Ενεργός',
+  last_login: 'Τελευταία Σύνδεση',
+  last_login_agent: 'Τελευταία Σύνδεση Αξεσουάρ',
+  last_login_ip: 'Τελευταία Σύνδεση IP',
+  afm: 'ΑΦΜ'
+};
+var data = new Array(20).fill({
+  name: 'Τάκης Τσούκαλος',
+  afm: '1111111114',
+  role: 'Χειριστής',
+  at: '1212121',
+  email: 'myhomeemail@gov.gr',
+  phone: '22222222',
+  address: 'Αγία Παρασκευής',
+  city: 'Αγία Παρασκευή',
+  country: 'Ελλάδα',
+  zip: '222233',
+  active: 'Ναι',
+  last_login: '12/12/12',
+  last_login_ip: '0.0.0.0',
+  last_login_agent: 'Firefox'
+});
+
+var _ref = /*#__PURE__*/React.createElement(TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref2 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/React.createElement(Dropdown, {
+  "float": true,
+  align: "right",
+  placement: "bottom"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  href: "#"
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  href: "#"
+}, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
+
+export var WithFloatingScroll = function WithFloatingScroll() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableFloatingScroll, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref)), /*#__PURE__*/React.createElement(TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/React.createElement(TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref2);
+  })))));
+};
+export default WithFloatingScroll;

package/content/Table/__stories__/WithLoader.js

@@ -13,11 +13,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Loader = require("@digigov/ui/app/Loader");
+var _Loader = require("../../../app/Loader");
 
-var _Table = require("@digigov/ui/content/Table");
+var _ = require("./..");
 
-var _Button = require("@digigov/ui/form/Button");
+var _Button = require("../../../form/Button");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -47,9 +47,9 @@ var data = {
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Loader.LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_Loader.CircularProgress, null));
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Table.TableLoaderBackground, null, /*#__PURE__*/_react["default"].createElement(_Loader.LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_Loader.CircularProgress, null)));
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_.TableLoaderBackground, null, /*#__PURE__*/_react["default"].createElement(_Loader.LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_Loader.CircularProgress, null)));
 
-var _ref3 = /*#__PURE__*/_react["default"].createElement(_Table.TableNoDataRow, null, "No data");
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_.TableNoDataRow, null, "No data");
 
 var WithLoader = function WithLoader() {
   var _useState = (0, _react.useState)(),
@@ -65,18 +65,18 @@ var WithLoader = function WithLoader() {
   setTimeout(function () {
     setTableData(data);
   }, 2000);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Table.TableContainer, null, !tableData ? _ref : /*#__PURE__*/_react["default"].createElement(_Table.Table, null, tableData && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Table.TableCaption, null, tableData.title), /*#__PURE__*/_react["default"].createElement(_Table.TableHead, null, /*#__PURE__*/_react["default"].createElement(_Table.TableRow, null, tableData.labels && Object.keys(tableData.labels).map(function (key) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableHeadCell, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.TableContainer, null, !tableData ? _ref : /*#__PURE__*/_react["default"].createElement(_.Table, null, tableData && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.TableCaption, null, tableData.title), /*#__PURE__*/_react["default"].createElement(_.TableHead, null, /*#__PURE__*/_react["default"].createElement(_.TableRow, null, tableData.labels && Object.keys(tableData.labels).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableHeadCell, {
       key: key
     }, tableData.labels[key]);
-  }))), /*#__PURE__*/_react["default"].createElement(_Table.TableBody, null, loading === true && _ref2, tableData.content && tableData.content.length > 0 ? tableData.content.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableRow, {
+  }))), /*#__PURE__*/_react["default"].createElement(_.TableBody, null, loading === true && _ref2, tableData.content && tableData.content.length > 0 ? tableData.content.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableRow, {
       key: index
-    }, /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, {
+    }, /*#__PURE__*/_react["default"].createElement(_.TableDataCell, {
       "data-label": tableData.labels.name
-    }, item.name), /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, {
+    }, item.name), /*#__PURE__*/_react["default"].createElement(_.TableDataCell, {
       "data-label": tableData.labels.role
-    }, item.role), /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, {
+    }, item.role), /*#__PURE__*/_react["default"].createElement(_.TableDataCell, {
       "data-label": tableData.labels.email
     }, item.email));
   }) : _ref3)))), /*#__PURE__*/_react["default"].createElement(_Button.Button, {

package/content/Table/__stories__/WithLoader.mjs

@@ -0,0 +1,71 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { CircularProgress } from "../../../app/Loader";
+import { LoaderContainer } from "../../../app/Loader";
+import { TableLoaderBackground } from "./..";
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableNoDataRow } from "./..";
+import { Button } from "../../../form/Button";
+var data = {
+  title: 'Χρήστες',
+  labels: {
+    name: 'Ονοματεπώνυμο',
+    role: 'Ρόλος',
+    email: 'Email'
+  },
+  content: [{
+    name: 'Μάριος Μενεξές',
+    role: 'Χειριστής',
+    email: 'marios@mail.com'
+  }, {
+    name: 'Καλλιόπη Παπαδοπούλου',
+    role: 'Χειριστής',
+    email: 'kalliopi@mail.com'
+  }, {
+    name: 'Μαρία Φλούπη',
+    role: 'Διαχειριστής',
+    email: 'maria@mail.com'
+  }]
+};
+
+var _ref = /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null));
+
+var _ref2 = /*#__PURE__*/React.createElement(TableLoaderBackground, null, /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null)));
+
+var _ref3 = /*#__PURE__*/React.createElement(TableNoDataRow, null, "No data");
+
+export var WithLoader = function WithLoader() {
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      tableData = _useState2[0],
+      setTableData = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  setTimeout(function () {
+    setTableData(data);
+  }, 2000);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableContainer, null, !tableData ? _ref : /*#__PURE__*/React.createElement(Table, null, tableData && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableCaption, null, tableData.title), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, tableData.labels && Object.keys(tableData.labels).map(function (key) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: key
+    }, tableData.labels[key]);
+  }))), /*#__PURE__*/React.createElement(TableBody, null, loading === true && _ref2, tableData.content && tableData.content.length > 0 ? tableData.content.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TableDataCell, {
+      "data-label": tableData.labels.name
+    }, item.name), /*#__PURE__*/React.createElement(TableDataCell, {
+      "data-label": tableData.labels.role
+    }, item.role), /*#__PURE__*/React.createElement(TableDataCell, {
+      "data-label": tableData.labels.email
+    }, item.email));
+  }) : _ref3)))), /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: function onClick() {
+      setLoading(!loading);
+    }
+  }, loading ? 'Απόκρυψη ' : 'Εμφάνιση ', "\u03C6\u03CC\u03C1\u03C4\u03C9\u03C3\u03B7\u03C2"));
+};
+export default WithLoader;

package/content/Table/__stories__/WithSortFilters.js

@@ -9,9 +9,9 @@ exports["default"] = exports.WithSortFilters = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Table = require("@digigov/ui/content/Table");
+var _ = require("./..");
 
-var _useSort2 = require("@digigov/ui/content/Table/hooks/useSort");
+var _useSort2 = require("../hooks/useSort");
 
 var headerConfig = [{
   name: 'product',
@@ -86,9 +86,9 @@ var data = [{
   date: '2000-12-12'
 }];
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Table.TableCaption, null, "\u03A0\u03AF\u03BD\u03B1\u03BA\u03B1\u03C2 \u03C0\u03C1\u03BF\u03CA\u03CC\u03BD\u03C4\u03C9\u03BD");
+var _ref = /*#__PURE__*/_react["default"].createElement(_.TableCaption, null, "\u03A0\u03AF\u03BD\u03B1\u03BA\u03B1\u03C2 \u03C0\u03C1\u03BF\u03CA\u03CC\u03BD\u03C4\u03C9\u03BD");
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Table.TableNoDataRow, null, "\u0394\u03B5\u03BD \u03C5\u03C0\u03C1\u03C7\u03BF\u03C5\u03BD \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1");
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_.TableNoDataRow, null, "\u0394\u03B5\u03BD \u03C5\u03C0\u03C1\u03C7\u03BF\u03C5\u03BD \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1");
 
 var WithSortFilters = function WithSortFilters() {
   var _useSort = (0, _useSort2.useSort)(data),
@@ -97,20 +97,20 @@ var WithSortFilters = function WithSortFilters() {
       field = _useSort.field,
       direction = _useSort.direction;
 
-  return /*#__PURE__*/_react["default"].createElement(_Table.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_Table.Table, null, _ref, /*#__PURE__*/_react["default"].createElement(_Table.TableHead, null, /*#__PURE__*/_react["default"].createElement(_Table.TableRow, null, headerConfig.map(function (header, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableHeadCell, {
+  return /*#__PURE__*/_react["default"].createElement(_.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_.Table, null, _ref, /*#__PURE__*/_react["default"].createElement(_.TableHead, null, /*#__PURE__*/_react["default"].createElement(_.TableRow, null, headerConfig.map(function (header, index) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableHeadCell, {
       key: index
-    }, /*#__PURE__*/_react["default"].createElement(_Table.TableSortLabel, {
+    }, /*#__PURE__*/_react["default"].createElement(_.TableSortLabel, {
       labels: header.sortLabels,
       onSort: function onSort(dir) {
         return setSortedField(header.name, dir);
       },
       direction: header.name === field ? direction : 0
     }, header.label));
-  }))), /*#__PURE__*/_react["default"].createElement(_Table.TableBody, null, sortedData.length > 0 ? sortedData.map(function (d, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableRow, {
+  }))), /*#__PURE__*/_react["default"].createElement(_.TableBody, null, sortedData.length > 0 ? sortedData.map(function (d, index) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableRow, {
       key: index
-    }, /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, null, d.product), /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, null, d.price), /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, null, d.stock), /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, null, new Date(d.date).toLocaleDateString('en-GB')));
+    }, /*#__PURE__*/_react["default"].createElement(_.TableDataCell, null, d.product), /*#__PURE__*/_react["default"].createElement(_.TableDataCell, null, d.price), /*#__PURE__*/_react["default"].createElement(_.TableDataCell, null, d.stock), /*#__PURE__*/_react["default"].createElement(_.TableDataCell, null, new Date(d.date).toLocaleDateString('en-GB')));
   }) : _ref2)));
 };
 

package/content/Table/__stories__/WithSortFilters.mjs

@@ -0,0 +1,104 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableNoDataRow, TableSortLabel } from "./..";
+import { useSort } from "../hooks/useSort";
+var headerConfig = [{
+  name: 'product',
+  label: 'Προϊόν',
+  sortLabels: {
+    asc: 'Αλφαβητική σειρά (Α -> Ω)',
+    desc: 'Αλφαβητική σειρά (Ω -> Α)'
+  }
+}, {
+  name: 'price',
+  label: 'Τιμή',
+  sortLabels: {
+    asc: 'Αύξουσα σειρά',
+    desc: 'Φθίνουσα σειρά'
+  }
+}, {
+  name: 'stock',
+  label: 'Στοκ',
+  sortLabels: {
+    asc: 'Αύξουσα σειρά',
+    desc: 'Φθίνουσα σειρά'
+  }
+}, {
+  name: 'date',
+  label: 'Ημερομηνία',
+  sortLabels: {
+    asc: 'Αύξουσα σειρά',
+    desc: 'Φθίνουσα σειρά'
+  }
+}];
+var data = [{
+  id: 1,
+  product: 'Τυρί',
+  price: '4.9€',
+  stock: 20,
+  date: '2013-04-01'
+}, {
+  id: 2,
+  product: 'Γάλα',
+  price: '1.9€',
+  stock: 32,
+  date: '2013-01-01'
+}, {
+  id: 3,
+  product: 'Γιαούρτι',
+  price: '2.4€',
+  stock: 12,
+  date: '2002-04-12'
+}, {
+  id: 4,
+  product: 'Κρέμα',
+  price: '3.9€',
+  stock: 8,
+  date: '2011-12-12'
+}, {
+  id: 5,
+  product: 'Βούτυρο',
+  price: '0.9€',
+  stock: 99,
+  date: '2019-06-01'
+}, {
+  id: 6,
+  product: 'Καφές',
+  price: '2.9€',
+  stock: 86,
+  date: '2023-02-11'
+}, {
+  id: 7,
+  product: 'Ψωμί',
+  price: '99€',
+  stock: 12,
+  date: '2000-12-12'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(TableCaption, null, "\u03A0\u03AF\u03BD\u03B1\u03BA\u03B1\u03C2 \u03C0\u03C1\u03BF\u03CA\u03CC\u03BD\u03C4\u03C9\u03BD");
+
+var _ref2 = /*#__PURE__*/React.createElement(TableNoDataRow, null, "\u0394\u03B5\u03BD \u03C5\u03C0\u03C1\u03C7\u03BF\u03C5\u03BD \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1");
+
+export var WithSortFilters = function WithSortFilters() {
+  var _useSort = useSort(data),
+      sortedData = _useSort.sortedData,
+      setSortedField = _useSort.setSortedField,
+      field = _useSort.field,
+      direction = _useSort.direction;
+
+  return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, _ref, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, headerConfig.map(function (header, index) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TableSortLabel, {
+      labels: header.sortLabels,
+      onSort: function onSort(dir) {
+        return setSortedField(header.name, dir);
+      },
+      direction: header.name === field ? direction : 0
+    }, header.label));
+  }))), /*#__PURE__*/React.createElement(TableBody, null, sortedData.length > 0 ? sortedData.map(function (d, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TableDataCell, null, d.product), /*#__PURE__*/React.createElement(TableDataCell, null, d.price), /*#__PURE__*/React.createElement(TableDataCell, null, d.stock), /*#__PURE__*/React.createElement(TableDataCell, null, new Date(d.date).toLocaleDateString('en-GB')));
+  }) : _ref2)));
+};
+export default WithSortFilters;

package/content/Table/__stories__/ZebraProp.js

@@ -9,7 +9,7 @@ exports["default"] = exports.ZebraProp = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Table = require("@digigov/ui/content/Table");
+var _ = require("./..");
 
 var data = {
   title: 'Χρήστες',
@@ -38,20 +38,20 @@ var data = {
 };
 
 var ZebraProp = function ZebraProp() {
-  return /*#__PURE__*/_react["default"].createElement(_Table.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_Table.Table, {
+  return /*#__PURE__*/_react["default"].createElement(_.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_.Table, {
     variant: "zebra"
-  }, data && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Table.TableCaption, null, data.title), /*#__PURE__*/_react["default"].createElement(_Table.TableHead, null, /*#__PURE__*/_react["default"].createElement(_Table.TableRow, null, data.labels && Object.keys(data.labels).map(function (key) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableHeadCell, {
+  }, data && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.TableCaption, null, data.title), /*#__PURE__*/_react["default"].createElement(_.TableHead, null, /*#__PURE__*/_react["default"].createElement(_.TableRow, null, data.labels && Object.keys(data.labels).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableHeadCell, {
       key: key
     }, data.labels[key]);
-  }))), /*#__PURE__*/_react["default"].createElement(_Table.TableBody, null, data.content && data.content.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Table.TableRow, {
+  }))), /*#__PURE__*/_react["default"].createElement(_.TableBody, null, data.content && data.content.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_.TableRow, {
       key: index
-    }, /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, {
+    }, /*#__PURE__*/_react["default"].createElement(_.TableDataCell, {
       "data-label": data.labels.name
-    }, item.name), /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, {
+    }, item.name), /*#__PURE__*/_react["default"].createElement(_.TableDataCell, {
       "data-label": data.labels.role
-    }, item.role), /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, {
+    }, item.role), /*#__PURE__*/_react["default"].createElement(_.TableDataCell, {
       "data-label": data.labels.email
     }, item.email));
   })))));

package/content/Table/__stories__/ZebraProp.mjs

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from "./..";
+var data = {
+  title: 'Χρήστες',
+  labels: {
+    name: 'Ονοματεπώνυμο',
+    role: 'Ρόλος',
+    email: 'Email'
+  },
+  content: [{
+    name: 'Μάριος Μενεξές',
+    role: 'Χειριστής',
+    email: 'marios@mail.com'
+  }, {
+    name: 'Καλλιόπη Παπαδοπούλου',
+    role: 'Χειριστής',
+    email: 'kalliopi@mail.com'
+  }, {
+    name: 'Μαρία Φλούπη',
+    role: 'Διαχειριστής',
+    email: 'maria@mail.com'
+  }, {
+    name: 'Ηλέκτρα Αποστόλου',
+    role: 'Διαχειριστής',
+    email: 'ilektra@mail.com'
+  }]
+};
+export var ZebraProp = function ZebraProp() {
+  return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, {
+    variant: "zebra"
+  }, data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableCaption, null, data.title), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, data.labels && Object.keys(data.labels).map(function (key) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: key
+    }, data.labels[key]);
+  }))), /*#__PURE__*/React.createElement(TableBody, null, data.content && data.content.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, /*#__PURE__*/React.createElement(TableDataCell, {
+      "data-label": data.labels.name
+    }, item.name), /*#__PURE__*/React.createElement(TableDataCell, {
+      "data-label": data.labels.role
+    }, item.role), /*#__PURE__*/React.createElement(TableDataCell, {
+      "data-label": data.labels.email
+    }, item.email));
+  })))));
+};
+export default ZebraProp;

package/content/Table/index.d.ts

@@ -11,7 +11,7 @@ export interface TableSortLabelProps extends DropdownProps {
     direction?: SortDirection;
     onSort: (direction: SortDirection) => void;
 }
-export declare const TableSortLabel: React.ForwardRefExoticComponent<Pick<TableSortLabelProps, "children" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "direction" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "open" | "onToggle" | "align" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "placement" | "closeBehaviour" | "float" | "labels" | "onSort"> & React.RefAttributes<HTMLDetailsElement>>;
+export declare const TableSortLabel: React.ForwardRefExoticComponent<Pick<TableSortLabelProps, "children" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "direction" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "open" | "onToggle" | "align" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "dense" | "placement" | "closeBehaviour" | "float" | "labels" | "onSort"> & React.RefAttributes<HTMLDetailsElement>>;
 export * from '@digigov/react-core/TableContainer';
 export * from '@digigov/react-core/Table';
 export * from '@digigov/react-core/TableBody';

package/content/Table/index.js

@@ -46,11 +46,11 @@ Object.keys(_TableSortIconContainer).forEach(function (key) {
   });
 });
 
-var _icons = require("@digigov/ui/icons");
+var _icons = require("../../icons");
 
-var _Dropdown = require("@digigov/ui/navigation/Dropdown");
+var _Dropdown = require("../../navigation/Dropdown");
 
-var _NavList = require("@digigov/ui/navigation/NavList");
+var _NavList = require("../../navigation/NavList");
 
 var _TableContainer = require("@digigov/react-core/TableContainer");
 
@@ -178,7 +178,7 @@ Object.keys(_TableLoaderBackground).forEach(function (key) {
   });
 });
 
-var _TableFloatingScroll = require("@digigov/ui/content/Table/TableFloatingScroll");
+var _TableFloatingScroll = require("./TableFloatingScroll");
 
 Object.keys(_TableFloatingScroll).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -192,7 +192,7 @@ Object.keys(_TableFloatingScroll).forEach(function (key) {
   });
 });
 
-var _useSort = require("@digigov/ui/content/Table/hooks/useSort");
+var _useSort = require("./hooks/useSort");
 
 Object.keys(_useSort).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;