@netdata/netdata-ui
Version:
netdata UI kit
1,301 lines • 33.3 kB
JavaScript
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
};