@ndlib/component-library 0.0.65 → 0.0.66

package/dist/components/elements/Table/Table.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const OmitColumn: Story;
 export declare const ResponsiveColumn: Story;
 export declare const ColumnGroup: Story;
+export declare const Sortable: Story;

package/dist/components/elements/Table/Table.stories.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Table, TableColumn } from '.';
+import { SORT_DIRECTION, sortByKey } from '../../../utils/sortByKey';
+import { useState } from 'react';
 const meta = {
     title: 'Elements/Table',
     component: Table,
@@ -71,3 +73,25 @@ export const ColumnGroup = {
                 ]] })));
     },
 };
+const SortableStory = () => {
+    const [sortConfig, setSortConfig] = useState({
+        key: 'name',
+        direction: SORT_DIRECTION.ASC,
+    });
+    console.log(sortConfig);
+    const sorted = sortByKey({
+        items: data,
+        config: sortConfig,
+    });
+    return (_jsxs(Table, Object.assign({ data: sorted, alternateRowColor: true, sortConfig: sortConfig, updateSort: setSortConfig }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sortable: true, sx: {
+                    width: '160px',
+                } }), [
+                _jsx(TableColumn, Object.assign({ header: "Age", sortKey: "age", sortable: true, sx: {
+                        width: '100px',
+                    } }, { children: (row) => row.age })),
+                _jsx(TableColumn, { header: "Occupation", sortable: true, dataKey: "position" }),
+            ]] })));
+};
+export const Sortable = {
+    render: SortableStory,
+};

package/dist/components/elements/Table/Table.test.js

@@ -13,7 +13,7 @@ const data = [
         col3: 'Cell 2-3',
     },
 ];
-export const testExample = (_jsxs(Table, Object.assign({ data: data }, { children: [_jsx(TableColumn, { header: "Column 1", dataKey: "col1" }), _jsx(TableColumn, Object.assign({ header: "Column 2" }, { children: (row) => row.col2 })), _jsx(TableColumn, { dataKey: "col3", header: _jsx("div", { children: "Column 3" }) })] })));
+export const testExample = (_jsxs(Table, Object.assign({ data: data }, { children: [_jsx(TableColumn, { header: "Column 1", dataKey: "col1" }), _jsx(TableColumn, Object.assign({ header: "Column 2" }, { children: (row) => row.col2 })), _jsx(TableColumn, { dataKey: "col3", header: "Column 3" })] })));
 describe('Table', () => {
     it('renders all headers and cells', () => {
         const { getByText } = render(testExample);

package/dist/components/elements/Table/index.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import { StyledElementProps, StylesProp } from '../../../theme';
+import { SortConfig } from '../../../utils/sortByKey';
 type ColumnRenderFn<RowData> = (data: RowData) => React.ReactNode;
 type ColumnProps<RowData extends object> = {
-    header: string | React.ReactNode;
+    header: string;
+    sortable?: boolean;
+    sortKey?: keyof RowData;
     dataKey?: keyof RowData;
     headerStyles?: StylesProp;
     align?: 'left' | 'center' | 'right';
@@ -14,6 +17,8 @@ type ColumnProps<RowData extends object> = {
 type ChildList = ChildList[] | JSX.Element | null | undefined;
 type TableProps<RowData> = StyledElementProps<HTMLTableElement, {
     data: RowData[];
+    sortConfig?: SortConfig<RowData>;
+    updateSort?: (sortConfig: SortConfig<RowData>) => void;
     children: ChildList[];
     cellStyles?: StylesProp;
     alternateRowColor?: boolean;

package/dist/components/elements/Table/index.js

@@ -1,9 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
 import { useMemo } from 'react';
 import { COLOR } from '../../../theme/colors';
 import { useEnvironment } from '../../providers/env';
-import { TYPOGRAPHY_TYPE, typographyStyleMap } from '../../../theme/typography';
+import { FONT_SIZE, TYPOGRAPHY_TYPE, typographyStyleMap, } from '../../../theme/typography';
 import { useMediaQuery } from '../../providers/media';
+import { Row } from '../layout/Row';
+import _ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import _ArrowDropUp from '@mui/icons-material/ArrowDropUp';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { Icon } from '../Icon';
+import { SORT_DIRECTION } from '../../../utils/sortByKey';
+const ArrowDropDown = importedDefaultComponentShim(_ArrowDropDown);
+const ArrowDropUp = importedDefaultComponentShim(_ArrowDropUp);
 const useColumnSpec = (children) => {
     const headerList = [];
     const parseHeaders = (children) => {
@@ -41,7 +49,7 @@ export function TableColumn(props) {
     return null;
 }
 export function Table(props) {
-    const { role, data, alternateRowColor = true, cellStyles, sx, children, showRowDividers = true, showColumnDividers = false, } = props;
+    const { role, data, alternateRowColor = true, cellStyles, sx, children, showRowDividers = true, showColumnDividers = false, sortConfig, updateSort, } = props;
     const cellTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM];
     const headerTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONTROL_MEDIUM];
     const { breakpoint } = useMediaQuery();
@@ -61,7 +69,20 @@ export function Table(props) {
                         if (column.breakpoint && breakpoint < column.breakpoint) {
                             return null;
                         }
-                        return (_jsx("th", Object.assign({ role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles) }, { children: column.header }), i));
+                        const canSort = sortConfig && column.sortable;
+                        const sortKey = column.sortKey || column.dataKey;
+                        const onSort = () => {
+                            if (canSort) {
+                                const direction = sortConfig.direction === SORT_DIRECTION.ASC
+                                    ? SORT_DIRECTION.DESC
+                                    : SORT_DIRECTION.ASC;
+                                updateSort &&
+                                    updateSort({ key: sortKey, direction });
+                            }
+                        };
+                        return (_jsx("th", Object.assign({ role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles) }, { children: _jsxs(Row, Object.assign({ onClick: onSort, tabIndex: canSort ? 0 : undefined, sx: { cursor: canSort ? 'pointer' : 'default' } }, { children: [column.header, canSort &&
+                                        sortConfig.key === sortKey &&
+                                        (sortConfig.direction === SORT_DIRECTION.ASC ? (_jsx(Icon, { icon: ArrowDropUp, sx: { ml: 1 }, size: FONT_SIZE.MD })) : (_jsx(Icon, { icon: ArrowDropDown, sx: { ml: 1 }, size: FONT_SIZE.MD })))] })) }), i));
                     }) }) })), _jsx("tbody", Object.assign({ role: "rowgroup" }, { children: data.map((rowData, rowIndex) => {
                     return (_jsx("tr", Object.assign({ role: "row" }, { children: columnSpec.map((column, columnIndex) => {
                             if (column.breakpoint && breakpoint < column.breakpoint) {

package/dist/index.d.ts

@@ -48,4 +48,6 @@ export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './componen
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useUniqueId } from './components/providers/uniqueIds';
+export { sortByKey, SORT_DIRECTION } from './utils/sortByKey';
+export type { SortConfig } from './utils/sortByKey';
 export { useHover } from './utils/hooks/useHover';

package/dist/index.js

@@ -47,4 +47,5 @@ export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './componen
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useUniqueId } from './components/providers/uniqueIds';
+export { sortByKey, SORT_DIRECTION } from './utils/sortByKey';
 export { useHover } from './utils/hooks/useHover';

package/dist/utils/sortByKey.d.ts

@@ -0,0 +1,12 @@
+export declare enum SORT_DIRECTION {
+    ASC = "ASC",
+    DESC = "DESC"
+}
+export type SortConfig<RowData> = {
+    key: keyof RowData;
+    direction: SORT_DIRECTION;
+};
+export declare function sortByKey<Item = any>(params: {
+    items: Item[];
+    config: SortConfig<Item>;
+}): Item[];

package/dist/utils/sortByKey.js

@@ -0,0 +1,20 @@
+export var SORT_DIRECTION;
+(function (SORT_DIRECTION) {
+    SORT_DIRECTION["ASC"] = "ASC";
+    SORT_DIRECTION["DESC"] = "DESC";
+})(SORT_DIRECTION || (SORT_DIRECTION = {}));
+export function sortByKey(params) {
+    const { items, config: { key, direction }, } = params;
+    const newItems = [...items];
+    return newItems.sort((a, b) => {
+        if (a[key] < b[key] && direction === SORT_DIRECTION.ASC) {
+            return -1;
+        }
+        else if (b[key] < a[key] && direction === SORT_DIRECTION.DESC) {
+            return -1;
+        }
+        else {
+            return 1;
+        }
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "type": "module",
   "sideEffects": false,
   "files": [