function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useState } from "react";
import Table from "./table";
import Box from "../templates/box";
import Flex from "../templates/flex";
import { Text } from "../typography";
var colorFilter = {
  id: "colorFilter",
  options: [{
    value: "slate",
    label: "Slate",
    color: "#253858"
  }, {
    value: "silver",
    label: "Silver",
    color: "#666666"
  }],
  onChange: function onChange(selected) {
    console.log(selected);
  },
  value: ""
};
export var Basic = function Basic() {
  var _useState = useState(),
    value = _useState[0],
    setValue = _useState[1];
  var filteringOptions = [_objectSpread(_objectSpread({}, colorFilter), {}, {
    onChange: function onChange(value) {
      return setValue(value);
    },
    value: value
  })];
  return /*#__PURE__*/React.createElement(Box, {
    width: "800px"
  }, /*#__PURE__*/React.createElement(Table, {
    filteringOptions: filteringOptions,
    handleSearch: true
  }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.HeadRow, null, /*#__PURE__*/React.createElement(Table.HeadCell, null, "Column 1"), /*#__PURE__*/React.createElement(Table.HeadCell, null, "Column 2"), /*#__PURE__*/React.createElement(Table.HeadCell, null, "Column 3"), /*#__PURE__*/React.createElement(Table.HeadCell, null, "Column 4"), /*#__PURE__*/React.createElement(Table.HeadCell, null, "Column 5"))), /*#__PURE__*/React.createElement(Table.Body, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, "value 1"), /*#__PURE__*/React.createElement(Table.Cell, null, "value 2"), /*#__PURE__*/React.createElement(Table.Cell, null, "value 3"), /*#__PURE__*/React.createElement(Table.Cell, null, "value 4"), /*#__PURE__*/React.createElement(Table.Cell, null, "value 5")))));
};
export var SimpleTable = {
  component: function component() {
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref) {
        var getValue = _ref.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, null, "Alerts");
      },
      cell: function cell(_ref2) {
        var getValue = _ref2.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: 10,
        alerts: 15
      }, {
        nodes: 11,
        alerts: 11
      }, {
        nodes: 23,
        alerts: 22
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      dataColumns: mockDataColumns,
      data: mockData(),
      onClickRow: function onClickRow() {}
    }));
  }
};
export var Filters = {
  component: function component() {
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      enableColumnFilter: true,
      cell: function cell(_ref3) {
        var getValue = _ref3.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, null, "Alerts");
      },
      enableColumnFilter: true,
      cell: function cell(_ref4) {
        var getValue = _ref4.getValue;
        return getValue();
      },
      filterFn: function filterFn(row, columnId, value) {
        var original = row.original;
        var rowValue = original[columnId];
        return rowValue.toString().includes(value.toString());
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node1",
        alerts: 15
      }, {
        nodes: "node2",
        alerts: 11
      }, {
        nodes: "node3",
        alerts: 22
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      dataColumns: mockDataColumns,
      data: mockData()
    }));
  }
};
export var RowSelections = {
  component: function component() {
    var _useState2 = useState([]),
      selectedRows = _useState2[0],
      onRowSelected = _useState2[1];
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref5) {
        var getValue = _ref5.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, null, "Alerts");
      },
      cell: function cell(_ref6) {
        var getValue = _ref6.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: 10,
        alerts: 15
      }, {
        nodes: 11,
        alerts: 11
      }, {
        nodes: 23,
        alerts: 22
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      enableSelection: true,
      dataColumns: mockDataColumns,
      data: mockData(),
      onRowSelected: onRowSelected
    }), /*#__PURE__*/React.createElement(Flex, {
      column: true,
      gap: 2
    }, "Selected Rows:", selectedRows.map(function (row) {
      return /*#__PURE__*/React.createElement(Flex, {
        gap: 2,
        key: row
      }, Object.keys(row).map(function (key) {
        return /*#__PURE__*/React.createElement(Box, {
          key: key + ":" + row[key]
        }, key, ":", row[key]);
      }));
    })));
  }
};
export var GlobalFilters = {
  component: function component() {
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref7) {
        var getValue = _ref7.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Alerts");
      },
      cell: function cell(_ref8) {
        var getValue = _ref8.getValue;
        return getValue();
      }
    }, {
      id: "user",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Users");
      },
      cell: function cell(_ref9) {
        var getValue = _ref9.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node1",
        alerts: 15,
        user: "nic"
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex"
      }, {
        nodes: "node3",
        alerts: 22,
        user: "manolis"
      }];
    };
    var onGlobalSearchChange = function onGlobalSearchChange(value) {
      console.log(value);
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      title: "Table Title",
      onGlobalSearchChange: onGlobalSearchChange,
      dataColumns: mockDataColumns,
      data: mockData()
    }));
  }
};
export var Expanding = {
  component: function component() {
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref10) {
        var getValue = _ref10.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Alerts");
      },
      cell: function cell(_ref11) {
        var getValue = _ref11.getValue;
        return getValue();
      }
    }, {
      id: "user",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Users");
      },
      cell: function cell(_ref12) {
        var getValue = _ref12.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node1",
        alerts: 15,
        user: "nic",
        children: [{
          nodes: "node4",
          alerts: 5,
          user: "nic"
        }, {
          nodes: "node5",
          alerts: 6,
          user: "nic"
        }, {
          nodes: "node6",
          alerts: 4,
          user: "nic"
        }]
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex",
        children: [{
          nodes: "node7",
          alerts: 1,
          user: "alex"
        }, {
          nodes: "node8",
          alerts: 2,
          user: "alex"
        }, {
          nodes: "node9",
          alerts: 6,
          user: "alex"
        }, {
          nodes: "node10",
          alerts: 2,
          user: "alex"
        }]
      }, {
        nodes: "node3",
        alerts: 22,
        user: "manolis"
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      enableExpanding: true,
      dataColumns: mockDataColumns,
      data: mockData(),
      onClickRow: function onClickRow(_ref13) {
        var data = _ref13.data,
          table = _ref13.table,
          fullRow = _ref13.fullRow;
        // console.log(data, table, fullRow)
        console.log(fullRow.getCanExpand());
        fullRow.toggleExpanded();
      }
    }));
  }
};
export var Sorting = {
  component: function component() {
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref14) {
        var getValue = _ref14.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Alerts");
      },
      cell: function cell(_ref15) {
        var getValue = _ref15.getValue;
        return getValue();
      }
    }, {
      id: "user",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Users");
      },
      cell: function cell(_ref16) {
        var getValue = _ref16.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node1",
        alerts: 15,
        user: "nic"
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex"
      }, {
        nodes: "node3",
        alerts: 22,
        user: "manolis"
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      enableSorting: true,
      dataColumns: mockDataColumns,
      data: mockData()
    }));
  }
};
export var Actions = {
  component: function component() {
    var handleAction = function handleAction(data) {
      console.log(data);
    };
    var rowActions = {
      "delete": {
        handleAction: handleAction
      },
      info: {
        handleAction: handleAction
      },
      replace: {
        handleAction: handleAction
      }
    };
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref17) {
        var getValue = _ref17.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Alerts");
      },
      cell: function cell(_ref18) {
        var getValue = _ref18.getValue;
        return getValue();
      }
    }, {
      id: "user",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Users");
      },
      cell: function cell(_ref19) {
        var getValue = _ref19.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node1",
        alerts: 15,
        user: "nic"
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex"
      }, {
        nodes: "node3",
        alerts: 22,
        user: "manolis"
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      rowActions: rowActions,
      dataColumns: mockDataColumns,
      data: mockData()
    }));
  }
};
export var BulkActions = {
  component: function component() {
    var handleDelete = function handleDelete(data) {
      console.log("Delete has been clicked", data);
    };
    var handleDownload = function handleDownload(data) {
      console.log("Download has been clicked", data);
    };
    var handleToggleAlarms = function handleToggleAlarms(data) {
      console.log("Toggle alarm has been clicked", data);
    };
    var bulkActions = {
      "delete": {
        handleAction: handleDelete
      },
      download: {
        handleAction: handleDownload
      },
      toggleAlarm: {
        handleAction: handleToggleAlarms
      }
    };
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref20) {
        var getValue = _ref20.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Alerts");
      },
      cell: function cell(_ref21) {
        var getValue = _ref21.getValue;
        return getValue();
      }
    }, {
      id: "user",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Users");
      },
      cell: function cell(_ref22) {
        var getValue = _ref22.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node1",
        alerts: 15,
        user: "nic"
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex"
      }, {
        nodes: "node34",
        alerts: 22,
        user: "manolis"
      }, {
        nodes: "node5",
        alerts: 15,
        user: "achile"
      }, {
        nodes: "node6",
        alerts: 11,
        user: "barba"
      }, {
        nodes: "node7",
        alerts: 22,
        user: "decker"
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      bulkActions: bulkActions,
      enableSelection: true,
      dataColumns: mockDataColumns,
      data: mockData()
    }));
  }
};
export var Pagination = {
  component: function component() {
    var paginationOptions = {
      pageIndex: 0,
      pageSize: 2
    };
    var mockDataColumns = [{
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref23) {
        var getValue = _ref23.getValue;
        return getValue();
      }
    }, {
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Alerts");
      },
      cell: function cell(_ref24) {
        var getValue = _ref24.getValue;
        return getValue();
      }
    }, {
      id: "user",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Users");
      },
      cell: function cell(_ref25) {
        var getValue = _ref25.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node1",
        alerts: 15,
        user: "nic"
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex"
      }, {
        nodes: "node34",
        alerts: 22,
        user: "manolis"
      }, {
        nodes: "node5",
        alerts: 15,
        user: "achile"
      }, {
        nodes: "node6",
        alerts: 11,
        user: "barba"
      }, {
        nodes: "node7",
        alerts: 22,
        user: "decker"
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      width: "800px"
    }, /*#__PURE__*/React.createElement(Table, {
      paginationOptions: paginationOptions,
      enablePagination: true,
      dataColumns: mockDataColumns,
      data: mockData()
    }));
  }
};
export var FullTable = {
  component: function component() {
    var onGlobalSearchChange = function onGlobalSearchChange(value) {
      console.log(value);
    };
    var handleDelete = function handleDelete(data) {
      console.log("Delete has been clicked", data);
    };
    var handleDownload = function handleDownload(data) {
      console.log("Download has been clicked", data);
    };
    var handleToggleAlarms = function handleToggleAlarms(data) {
      console.log("Toggle alarm has been clicked", data);
    };
    var handleInfo = function handleInfo(data) {
      console.log("Info Clicked", data);
    };
    var bulkActions = {
      addEntry: {
        handleAction: function handleAction() {
          console.log("clicked");
        }
      },
      "delete": {
        handleAction: handleDelete
      },
      download: {
        handleAction: handleDownload
      },
      toggleAlarm: {
        handleAction: handleToggleAlarms
      }
    };
    var rowActions = {
      replace: {
        handleAction: function handleAction() {
          console.log("replaced!");
        },
        isDisabled: function isDisabled(row) {
          return row.disabled;
        }
      },
      "delete": {
        handleAction: handleDelete,
        isDisabled: function isDisabled(row) {
          return row.disabled;
        }
      },
      info: {
        handleAction: handleInfo
      }
    };
    var mockDataColumns = [{
      accessorKey: "nodes",
      header: "Nodes",
      id: "nodes",
      enableColumnFilter: false,
      cell: function cell(_ref26) {
        var getValue = _ref26.getValue;
        return getValue();
      },
      enableHiding: false,
      meta: {
        tooltip: "Information"
      }
    }, {
      accessorKey: "alerts",
      id: "alerts",
      name: "Alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, {
          strong: true
        }, "Alerts");
      },
      enableColumnFilter: true,
      filterFn: "comparison",
      meta: {
        filter: {
          component: "comparison"
        }
      },
      cell: function cell(_ref27) {
        var getValue = _ref27.getValue;
        return getValue();
      },
      size: 340
    }, {
      accessorKey: "user",
      header: "User",
      id: "user",
      name: "User",
      enableColumnFilter: true,
      enableSorting: false,
      cell: function cell(_ref28) {
        var getValue = _ref28.getValue;
        return getValue();
      },
      size: 200
    }, {
      accessorKey: "status",
      header: "Status",
      id: "status",
      name: "Status",
      enableColumnFilter: true,
      filterFn: "select",
      size: 200,
      cell: function cell(_ref29) {
        var getValue = _ref29.getValue;
        return getValue();
      },
      meta: {
        tooltip: "Information",
        filter: {
          component: "select",
          isMulti: true,
          options: [{
            value: "offline",
            label: "Offline"
          }, {
            value: "online",
            label: "Online"
          }, {
            value: "stale",
            label: "Stale"
          }]
        }
      }
    }, {
      accessorKey: "untouchable",
      header: "Untouchable",
      id: "untouchable",
      enableColumnFilter: true,
      enableSorting: false,
      filterFn: "select",
      size: 200,
      cell: function cell(_ref30) {
        var getValue = _ref30.getValue;
        return getValue();
      },
      meta: {
        filter: {
          component: "select",
          options: [{
            value: "true",
            label: "Yes"
          }, {
            value: "false",
            label: "No"
          }]
        }
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node31",
        alerts: 15,
        user: "mitsos",
        disabled: true,
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node0",
        alerts: 11,
        user: "koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node1",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node1",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node3",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node4",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node5",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node6",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }, {
        nodes: "node7",
        alerts: 11,
        user: "koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node8",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node9",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node10",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node11",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node12",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node13",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node14",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }, {
        nodes: "node15",
        alerts: 11,
        user: "koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node16",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node17",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node18",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node19",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node20",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node21",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node22",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }, {
        nodes: "node23",
        alerts: 11,
        user: "koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node24",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node25",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node26",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node27",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node28",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node29",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node30",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }];
    };
    return /*#__PURE__*/React.createElement(Box, {
      height: "800px",
      width: "1200px"
    }, /*#__PURE__*/React.createElement(Table, {
      onClickRow: function onClickRow(_ref31) {
        var data = _ref31.data,
          table = _ref31.table,
          fullRow = _ref31.fullRow;
        console.log(data, table, fullRow);
      },
      groupByColumnIds: ["alerts"],
      enableColumnPinning: true,
      enableResizing: true,
      sortBy: [{
        id: "nodes",
        desc: false
      }],
      onGlobalSearchChange: onGlobalSearchChange,
      enableSorting: true,
      rowActions: rowActions,
      bulkActions: bulkActions,
      enableSelection: true,
      dataColumns: mockDataColumns,
      data: mockData(),
      testPrefixCallback: function testPrefixCallback(row) {
        return row.nodes;
      },
      disableClickRow: function disableClickRow(_ref32) {
        var data = _ref32.data;
        return data.alerts > 15;
      },
      enableColumnVisibility: true,
      columnPinningOptions: {
        left: ["checkbox", "nodes"]
      }
    }));
  }
};
export var Pinning = {
  component: function component() {
    var mockDataColumns = [{
      accessorKey: "nodes",
      header: "Nodes",
      id: "nodes",
      cell: function cell(_ref33) {
        var getValue = _ref33.getValue;
        return getValue();
      },
      enableHiding: false
    }, {
      accessorKey: "alerts",
      id: "alerts",
      header: function header() {
        return /*#__PURE__*/React.createElement(Text, null, "Alerts");
      },
      cell: function cell(_ref34) {
        var getValue = _ref34.getValue;
        return getValue();
      },
      size: 340
    }, {
      accessorKey: "user",
      header: "user",
      id: "user",
      cell: function cell(_ref35) {
        var getValue = _ref35.getValue;
        return getValue();
      },
      size: 200
    }, {
      accessorKey: "status",
      header: "status",
      id: "status",
      size: 200,
      cell: function cell(_ref36) {
        var getValue = _ref36.getValue;
        return getValue();
      }
    }, {
      accessorKey: "untouchable",
      header: "Untouchable",
      id: "untouchable",
      size: 200,
      cell: function cell(_ref37) {
        var getValue = _ref37.getValue;
        return getValue();
      }
    }];
    var mockData = function mockData() {
      return [{
        nodes: "node31",
        alerts: 15,
        user: "mitsos",
        disabled: true,
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node0, node0, node0, node0, node0, node0, node0, node0, node0, node0, node0, node0, node0, node0, node0, node0",
        alerts: 11,
        user: "koukouroukou, koukouroukou, koukouroukou, koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node1",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node1",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node2",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node3",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node4",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node5",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node6",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }, {
        nodes: "node7",
        alerts: 11,
        user: "koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node8",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node9",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node10",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node11",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node12",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node13",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node14",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }, {
        nodes: "node15",
        alerts: 11,
        user: "koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node16",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node17",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node18",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node19",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node20",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node21",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node22",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }, {
        nodes: "node23",
        alerts: 11,
        user: "koukouroukou",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node24",
        alerts: 22,
        user: "reena",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node25",
        alerts: 15,
        user: "nic",
        status: "online",
        untouchable: "true"
      }, {
        nodes: "node26",
        alerts: 11,
        user: "alex",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node27",
        alerts: 22,
        user: "manolis",
        status: "offline",
        untouchable: "true"
      }, {
        nodes: "node28",
        alerts: 15,
        user: "achile",
        status: "stale",
        untouchable: "true"
      }, {
        nodes: "node29",
        alerts: 11,
        user: "barba",
        status: "stale",
        untouchable: "false"
      }, {
        nodes: "node30",
        alerts: 22,
        user: "decker",
        status: "online",
        untouchable: "false"
      }];
    };
    var handleDelete = function handleDelete(data) {
      console.log("Delete has been clicked", data);
    };
    var rowActions = {
      "delete": {
        handleAction: handleDelete,
        isDisabled: function isDisabled(row) {
          return row.disabled;
        }
      }
    };
    var columnPinning = {
      left: ["nodes"],
      right: ["actions"]
    };
    return /*#__PURE__*/React.createElement(Box, {
      height: "500px",
      width: "1000px"
    }, /*#__PURE__*/React.createElement(Table, {
      dataColumns: mockDataColumns,
      data: mockData(),
      rowActions: rowActions,
      columnPinning: columnPinning,
      enableColumnPinning: true
    }));
  }
};
export default {
  component: Table
};