@nulogy/components 15.2.1 → 15.2.3

package/dist/src/Table/stories/BaseTable.story.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { boolean, text } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 import { Box, DropdownButton, DropdownMenu, Button, Text, Flex } from "../..";
 import { getMockRows, mockColumns } from "../Table.mock-utils";
@@ -233,12 +232,79 @@ const rowDataWithSections = [
 ];
 export default {
     title: "Components/Table/Base",
+    component: Table,
+};
+export const WithData = {
+    args: {
+        columns,
+        rows: rowData,
+        rowHovers: true,
+        compact: false,
+        loading: false,
+        className: "Table",
+    },
+    argTypes: {
+        rowHovers: {
+            control: { type: "boolean" },
+        },
+        compact: {
+            control: { type: "boolean" },
+        },
+        loading: {
+            control: { type: "boolean" },
+        },
+    },
+};
+export const WithNoData = {
+    args: {
+        columns,
+        rows: [],
+        noRowsContent: undefined,
+        loading: false,
+    },
+    argTypes: {
+        noRowsContent: {
+            control: { type: "text" },
+        },
+        loading: {
+            control: { type: "boolean" },
+        },
+    },
+};
+export const WithStickyHeader = {
+    render: (args) => (React.createElement(Box, { mt: "x4" },
+        React.createElement(Table, { columns: columns, rows: rowData, rowHovers: args.rowHovers, compact: args.compact, loading: args.loading, className: "Table", stickyHeader: true }))),
+    args: {
+        rowHovers: true,
+        compact: false,
+        loading: false,
+    },
+    argTypes: {
+        rowHovers: {
+            control: { type: "boolean" },
+        },
+        compact: {
+            control: { type: "boolean" },
+        },
+        loading: {
+            control: { type: "boolean" },
+        },
+    },
+};
+export const WithLotsOfRowsAndColumns = {
+    args: {
+        columns: mockColumns,
+        rows: getMockRows(50),
+        hasSelectableRows: true,
+        onRowSelectionChange: action("row selection changed"),
+        loading: false,
+    },
+    argTypes: {
+        loading: {
+            control: { type: "boolean" },
+        },
+    },
 };
-export const WithData = () => (React.createElement(Table, { columns: columns, rows: rowData, rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false), className: "Table" }));
-export const WithNoData = () => (React.createElement(Table, { columns: columns, rows: [], noRowsContent: text("Custom text", undefined), loading: boolean("Show loading state", false) }));
-export const WithStickyHeader = () => (React.createElement(Box, { mt: "x4" },
-    React.createElement(Table, { columns: columns, rows: rowData, rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false), className: "Table", stickyHeader: true })));
-export const WithLotsOfRowsAndColumns = () => (React.createElement(Table, { columns: mockColumns, rows: getMockRows(50), hasSelectableRows: true, onRowSelectionChange: action("row selection changed"), loading: boolean("Show loading state", false) }));
 export const WithCustomColumnWidths = () => React.createElement(Table, { columns: columnsWithWidths, rows: rowDataWithWidths });
 export const WithACustomCellComponent = () => (React.createElement(Table, { columns: getColumnsWithCellRenderer(dropdownCellRenderer), rows: rowData }));
 export const WithCellAlignment = () => React.createElement(Table, { columns: columnsWithAlignment, rows: rowData });
@@ -267,34 +333,90 @@ export const WithMetadata = () => (React.createElement(Table, { columns: [
         },
     ], rows: rowData }));
 export const WithFullWidthSection = () => React.createElement(Table, { columns: columns, rows: rowDataWithSections });
-export const WithAFooter = () => (React.createElement(React.Fragment, null,
-    React.createElement(Table, { columns: columns, keyField: "date", rows: rowData, footerRows: footerRowData, loading: boolean("Show loading state", false) }),
-    React.createElement(Table, { compact: true, columns: columns, keyField: "date", rows: compactRowData, footerRows: footerRowData, loading: boolean("Show loading state", false) })));
-export const WithRowBorder = () => (React.createElement(Table, { rowBorder: boolean("Show row border", true), columns: columns, rows: rowData, rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false), className: "Table" }));
-export const WithVerticalAlignment = () => (React.createElement(Table, { rowBorder: boolean("Show row border", true), columns: [
-        { label: "Description", dataKey: "description", width: "50%" },
-        { label: "Expected Quantity", dataKey: "expectedQuantity" },
-        { label: "Actual Quantity", dataKey: "actualQuantity" },
-    ], rows: [
-        {
-            description: "This whole row is top aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
-            expectedQuantity: "2,025 eaches",
-            verticalAlign: "top",
-            actualQuantity: "1,800 eaches",
-            id: "r1",
+export const WithAFooter = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Table, { columns: columns, keyField: "date", rows: rowData, footerRows: footerRowData, loading: args.loading }),
+        React.createElement(Table, { compact: true, columns: columns, keyField: "date", rows: compactRowData, footerRows: footerRowData, loading: args.loading }))),
+    args: {
+        loading: false,
+    },
+    argTypes: {
+        loading: {
+            control: { type: "boolean" },
         },
-        {
-            description: "This whole row is middle aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
-            expectedQuantity: "2,475 eaches",
-            verticalAlign: "middle",
-            actualQuantity: "2,250 eaches",
-            id: "r2",
+    },
+};
+export const WithRowBorder = {
+    args: {
+        rowBorder: true,
+        columns,
+        rows: rowData,
+        rowHovers: true,
+        compact: false,
+        loading: false,
+        className: "Table",
+    },
+    argTypes: {
+        rowBorder: {
+            control: { type: "boolean" },
         },
-        {
-            description: "This whole row is bottom aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
-            expectedQuantity: "2,475 eaches",
-            verticalAlign: "bottom",
-            actualQuantity: "1,425 eaches",
-            id: "r3",
+        rowHovers: {
+            control: { type: "boolean" },
+        },
+        compact: {
+            control: { type: "boolean" },
         },
-    ], rowHovers: boolean("Show row hovers", true), compact: boolean("Show with compact styling", false), loading: boolean("Show loading state", false) }));
+        loading: {
+            control: { type: "boolean" },
+        },
+    },
+};
+export const WithVerticalAlignment = {
+    render: (args) => (React.createElement(Table, { rowBorder: args.rowBorder, columns: [
+            { label: "Description", dataKey: "description", width: "50%" },
+            { label: "Expected Quantity", dataKey: "expectedQuantity" },
+            { label: "Actual Quantity", dataKey: "actualQuantity" },
+        ], rows: [
+            {
+                description: "This whole row is top aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
+                expectedQuantity: "2,025 eaches",
+                verticalAlign: "top",
+                actualQuantity: "1,800 eaches",
+                id: "r1",
+            },
+            {
+                description: "This whole row is middle aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
+                expectedQuantity: "2,475 eaches",
+                verticalAlign: "middle",
+                actualQuantity: "2,250 eaches",
+                id: "r2",
+            },
+            {
+                description: "This whole row is bottom aligned. lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing elit lorem ipsum dolor sit amet consectetur adipiscing",
+                expectedQuantity: "2,475 eaches",
+                verticalAlign: "bottom",
+                actualQuantity: "1,425 eaches",
+                id: "r3",
+            },
+        ], rowHovers: args.rowHovers, compact: args.compact, loading: args.loading })),
+    args: {
+        rowBorder: true,
+        rowHovers: true,
+        compact: false,
+        loading: false,
+    },
+    argTypes: {
+        rowBorder: {
+            control: { type: "boolean" },
+        },
+        rowHovers: {
+            control: { type: "boolean" },
+        },
+        compact: {
+            control: { type: "boolean" },
+        },
+        loading: {
+            control: { type: "boolean" },
+        },
+    },
+};

package/dist/src/Table/stories/SortingColumnHeader.story.d.ts

@@ -1,6 +1,9 @@
-import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { Table } from "../../index";
 declare const _default: {
     title: string;
+    component: typeof import("../SortingColumnHeader").default;
 };
 export default _default;
-export declare const _SortingHeader: () => React.JSX.Element;
+type Story = StoryObj<typeof Table.SortingHeader>;
+export declare const _SortingHeader: Story;

package/dist/src/Table/stories/SortingColumnHeader.story.js

@@ -1,8 +1,25 @@
-import React from "react";
 import { action } from "@storybook/addon-actions";
-import { text, boolean } from "@storybook/addon-knobs";
 import { Table } from "../../index";
 export default {
     title: "Components/Table/Headers",
+    component: Table.SortingHeader,
+};
+export const _SortingHeader = {
+    args: {
+        onChange: action("sort change"),
+        label: "Header Label",
+        ascending: false,
+        active: false,
+    },
+    argTypes: {
+        label: {
+            control: { type: "text" },
+        },
+        ascending: {
+            control: { type: "boolean" },
+        },
+        active: {
+            control: { type: "boolean" },
+        },
+    },
 };
-export const _SortingHeader = () => (React.createElement(Table.SortingHeader, { onChange: action("sort change"), label: text("Label", "Header Label"), ascending: boolean("Ascending", false), active: boolean("Active", false) }));

package/dist/src/Table/stories/Table.story.d.ts

@@ -1,18 +1,11 @@
-import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { Table } from "..";
 declare const _default: {
     title: string;
+    component: typeof Table;
 };
 export default _default;
-export declare const WithPagination: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithEverything: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithOnHoverActions: () => React.JSX.Element;
+type Story = StoryObj<typeof Table>;
+export declare const WithPagination: Story;
+export declare const WithEverything: Story;
+export declare const WithOnHoverActions: Story;

package/dist/src/Table/stories/Table.story.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import { boolean, number } from "@storybook/addon-knobs";
 import { useState } from "react";
 import { Box, DropdownButton, DropdownMenu, Text } from "../..";
 import { Table } from "..";
@@ -166,137 +165,183 @@ const footerRowData = [
 ];
 export default {
     title: "Components/Table",
+    component: Table,
 };
-export const WithPagination = () => (React.createElement(Table, { columns: columns, rows: rowData, rowsPerPage: number("Rows per page", 1), onPageChange: action("page changed"), className: "Table" }));
-WithPagination.story = {
+export const WithPagination = {
+    args: {
+        columns,
+        rows: rowData,
+        rowsPerPage: 1,
+        onPageChange: action("page changed"),
+        className: "Table",
+    },
+    argTypes: {
+        rowsPerPage: {
+            control: { type: "number" },
+        },
+    },
     name: "with pagination",
 };
-export const WithEverything = () => (React.createElement(Table, { columns: columnsWithEverything, rows: rowDataWithEverything, footerRows: footerRowData, rowsPerPage: number("Rows per page", 5), hasExpandableRows: boolean("Expandable", true), onRowExpansionChange: action("toggled expand"), hasSelectableRows: boolean("Selectable", true), onRowSelectionChange: action("row selection changed"), onPageChange: action("page changed"), className: "Table", onRowMouseEnter: action("row mouse enter"), onRowMouseLeave: action("row mouse leave") }));
-WithEverything.story = {
-    name: "with everything",
-};
-export const WithOnHoverActions = () => {
-    const rowDataWithHovers = [
-        {
-            date: "2019-10-01",
-            expectedQuantity: "2,025 eaches",
-            actualQuantity: "1,800 eaches",
-            id: "r1",
-        },
-        {
-            date: "2019-10-01",
-            expectedQuantity: "2,025 eaches",
-            actualQuantity: "1,800 eaches",
-            id: "r2",
-        },
-        {
-            date: "2019-10-02",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "2,250 eaches",
-            id: "r3",
-        },
-        {
-            date: "2019-10-03",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "1,425 eaches",
-            id: "r4",
-        },
-        {
-            date: "2019-10-04",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "675 eaches",
-            note: "1c Other Plant-related issue, equipment issues",
-            id: "r5",
-        },
-        {
-            date: "2019-10-07",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "1,575 eaches",
-            id: "r6",
-        },
-        {
-            date: "2019-10-22",
-            expectedQuantity: "1,725 eaches",
-            actualQuantity: "-",
-            id: "r7",
-        },
-        {
-            date: "2019-10-23",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r8",
-        },
-        {
-            date: "2019-10-23",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r9",
-        },
-        {
-            date: "2019-10-24",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r10",
-        },
-        {
-            date: "2019-10-23",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r11",
-        },
-        {
-            date: "2019-10-23",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r12",
-        },
-        {
-            date: "2019-10-24",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r13",
-        },
-        {
-            date: "2019-10-24",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r14",
+export const WithEverything = {
+    args: {
+        columns: columnsWithEverything,
+        rows: rowDataWithEverything,
+        footerRows: footerRowData,
+        rowsPerPage: 5,
+        hasExpandableRows: true,
+        onRowExpansionChange: action("toggled expand"),
+        hasSelectableRows: true,
+        onRowSelectionChange: action("row selection changed"),
+        onPageChange: action("page changed"),
+        className: "Table",
+        onRowMouseEnter: action("row mouse enter"),
+        onRowMouseLeave: action("row mouse leave"),
+    },
+    argTypes: {
+        rowsPerPage: {
+            control: { type: "number" },
         },
-        {
-            date: "2019-10-24",
-            expectedQuantity: "2,475 eaches",
-            actualQuantity: "-",
-            id: "r15",
+        hasExpandableRows: {
+            control: { type: "boolean" },
         },
-    ];
-    const dropdownCellRendererWithHover = ({ cellData, row }) => {
-        return (React.createElement(Box, { textAlign: "right", pr: "x3", width: "40px" }, row.id === hoveredRow && (React.createElement(DropdownMenu, null,
-            React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
-            React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete")))));
-    };
-    const columnsWithHovers = [
-        {
-            label: "Date",
-            dataKey: "date",
-            cellFormatter: dateToString,
-            width: "15%",
+        hasSelectableRows: {
+            control: { type: "boolean" },
         },
-        { label: "Expected Quantity", dataKey: "expectedQuantity", width: "20%" },
-        { label: "Actual Quantity", dataKey: "actualQuantity", width: "20%" },
-        { label: "Note", dataKey: "note", width: "45%" },
-        {
-            label: "",
-            dataKey: "actions",
-            width: "100px",
-            cellRenderer: dropdownCellRendererWithHover,
+    },
+    name: "with everything",
+};
+export const WithOnHoverActions = {
+    render: (args) => {
+        const rowDataWithHovers = [
+            {
+                date: "2019-10-01",
+                expectedQuantity: "2,025 eaches",
+                actualQuantity: "1,800 eaches",
+                id: "r1",
+            },
+            {
+                date: "2019-10-01",
+                expectedQuantity: "2,025 eaches",
+                actualQuantity: "1,800 eaches",
+                id: "r2",
+            },
+            {
+                date: "2019-10-02",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "2,250 eaches",
+                id: "r3",
+            },
+            {
+                date: "2019-10-03",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "1,425 eaches",
+                id: "r4",
+            },
+            {
+                date: "2019-10-04",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "675 eaches",
+                note: "1c Other Plant-related issue, equipment issues",
+                id: "r5",
+            },
+            {
+                date: "2019-10-07",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "1,575 eaches",
+                id: "r6",
+            },
+            {
+                date: "2019-10-22",
+                expectedQuantity: "1,725 eaches",
+                actualQuantity: "-",
+                id: "r7",
+            },
+            {
+                date: "2019-10-23",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r8",
+            },
+            {
+                date: "2019-10-23",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r9",
+            },
+            {
+                date: "2019-10-24",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r10",
+            },
+            {
+                date: "2019-10-23",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r11",
+            },
+            {
+                date: "2019-10-23",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r12",
+            },
+            {
+                date: "2019-10-24",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r13",
+            },
+            {
+                date: "2019-10-24",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r14",
+            },
+            {
+                date: "2019-10-24",
+                expectedQuantity: "2,475 eaches",
+                actualQuantity: "-",
+                id: "r15",
+            },
+        ];
+        const [hoveredRow, setHoveredRow] = useState(null);
+        const dropdownCellRendererWithHover = ({ cellData, row }) => {
+            return (React.createElement(Box, { textAlign: "right", pr: "x3", width: "40px" }, row.id === hoveredRow && (React.createElement(DropdownMenu, null,
+                React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
+                React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete")))));
+        };
+        const columnsWithHovers = [
+            {
+                label: "Date",
+                dataKey: "date",
+                cellFormatter: dateToString,
+                width: "15%",
+            },
+            { label: "Expected Quantity", dataKey: "expectedQuantity", width: "20%" },
+            { label: "Actual Quantity", dataKey: "actualQuantity", width: "20%" },
+            { label: "Note", dataKey: "note", width: "45%" },
+            {
+                label: "",
+                dataKey: "actions",
+                width: "100px",
+                cellRenderer: dropdownCellRendererWithHover,
+            },
+        ];
+        const onMouseEnter = ({ row }) => {
+            setHoveredRow(row.id);
+        };
+        const onMouseLeave = () => {
+            setHoveredRow(null);
+        };
+        return (React.createElement(Table, { columns: columnsWithHovers, rows: rowDataWithHovers, footerRows: footerRowData, hasSelectableRows: args.hasSelectableRows, onRowSelectionChange: action("row selection changed"), className: "Table", onRowMouseEnter: onMouseEnter, onRowMouseLeave: onMouseLeave, onMouseLeave: onMouseLeave }));
+    },
+    args: {
+        hasSelectableRows: true,
+    },
+    argTypes: {
+        hasSelectableRows: {
+            control: { type: "boolean" },
         },
-    ];
-    const [hoveredRow, setHoveredRow] = useState(null);
-    const onMouseEnter = ({ row }) => {
-        setHoveredRow(row.id);
-    };
-    const onMouseLeave = () => {
-        setHoveredRow(null);
-    };
-    return (React.createElement(Table, { columns: columnsWithHovers, rows: rowDataWithHovers, footerRows: footerRowData, hasSelectableRows: boolean("Selectable", true), onRowSelectionChange: action("row selection changed"), className: "Table", onRowMouseEnter: onMouseEnter, onRowMouseLeave: onMouseLeave, onMouseLeave: onMouseLeave }));
+    },
 };

package/dist/src/Table/stories/TableWithCustomSorting.story.js

@@ -46,7 +46,10 @@ const TableWithCustomSorting = () => {
     };
     const transformColumn = (column) => {
         const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
-        return Object.assign(Object.assign({}, column), { headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })) });
+        return {
+            ...column,
+            headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })),
+        };
     };
     const columns = COLUMNS.map((column) => transformColumn(column));
     return React.createElement(Table, { columns: columns, rows: rows, keyField: KEY_FIELD });

package/dist/src/Table/stories/TableWithFiltering.story.js

@@ -17,7 +17,10 @@ const ROWS = [
     { name: "F. Scott Fitzgerald", description: "author" },
 ];
 const transformColumn = (column, onChange) => {
-    return Object.assign(Object.assign({}, column), { headerFormatter: ({ label, dataKey }) => (React.createElement(ColumnHeaderWithFilter, { onChange: (e) => onChange(dataKey, e), label: label })) });
+    return {
+        ...column,
+        headerFormatter: ({ label, dataKey }) => (React.createElement(ColumnHeaderWithFilter, { onChange: (e) => onChange(dataKey, e), label: label })),
+    };
 };
 const ColumnHeaderWithFilter = ({ onChange, label }) => (React.createElement(Input, { labelText: `Filter by ${label}`, onChange: onChange, name: label }));
 const TableWithFilters = ({ rowsPerPage }) => {
@@ -36,7 +39,10 @@ const TableWithFilters = ({ rowsPerPage }) => {
     }, [filter]);
     const onFilterInputChange = (dataKey, e) => {
         const filterValue = e.currentTarget.value;
-        return setFilter((state) => (Object.assign(Object.assign({}, state), { [dataKey]: filterValue })));
+        return setFilter((state) => ({
+            ...state,
+            [dataKey]: filterValue,
+        }));
     };
     const columns = COLUMNS.map((column) => transformColumn(column, onFilterInputChange));
     return React.createElement(Table, { columns: columns, rows: rows, keyField: "name", rowsPerPage: rowsPerPage });

package/dist/src/Table/stories/TableWithServerSidePagination.story.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Table } from "../..";
 import { Pagination } from "../../Pagination";
@@ -29,10 +18,10 @@ class TableWithServerSidePagination extends React.Component {
                 .then((json) => {
                 this.setState({
                     loading: false,
-                    rows: json.map((_a) => {
-                        var { completed } = _a, item = __rest(_a, ["completed"]);
-                        return (Object.assign(Object.assign({}, item), { completed: completed ? "Yes" : "-" }));
-                    }),
+                    rows: json.map(({ completed, ...item }) => ({
+                        ...item,
+                        completed: completed ? "Yes" : "-",
+                    })),
                 }, callback);
             });
         };