UNPKG

lucid-ui

Version:

A UI component library from Xandr.

github.com/appnexus/lucid

632 lines • 92.4 kB

JavaScript

"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.SetTableWidth = exports.FullWidth = exports.SetWidthAndHeight = exports.WithBorder = exports.Basic = void 0; var react_1 = __importDefault(require("react")); var ScrollTable_1 = __importDefault(require("./ScrollTable")); var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox")); var SuccessIcon_1 = __importDefault(require("../Icon/SuccessIcon/SuccessIcon")); var Button_1 = __importDefault(require("../Button/Button")); exports.default = { title: 'Table/ScrollTable', component: ScrollTable_1.default, parameters: { docs: { description: { component: ScrollTable_1.default.peek.description, }, }, }, args: ScrollTable_1.default.defaultProps, }; /* Basic */ var Basic = function (args) { var Thead = ScrollTable_1.default.Thead, Tbody = ScrollTable_1.default.Tbody, Tr = ScrollTable_1.default.Tr, Th = ScrollTable_1.default.Th, Td = ScrollTable_1.default.Td; return (react_1.default.createElement(ScrollTable_1.default, __assign({}, args), react_1.default.createElement(Thead, null, react_1.default.createElement(Tr, null, react_1.default.createElement(Th, { rowSpan: 2 }, "RS"), react_1.default.createElement(Th, { rowSpan: 2 }, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."), react_1.default.createElement(Th, { rowSpan: 2 }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Th, { rowSpan: 2 }, "Button"), react_1.default.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"), react_1.default.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments")), react_1.default.createElement(Tr, null, react_1.default.createElement(Th, { align: 'left' }, "align left"), react_1.default.createElement(Th, { align: 'center', isResizable: true }, "align center"), react_1.default.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))), react_1.default.createElement(Tbody, null, react_1.default.createElement(Tr, null, react_1.default.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"), react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "Text"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "Text && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isDisabled && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, null, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "Link")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "isDisabled Link")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "Link && isActionable")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "isDisabled Link && isActionable")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isDisabled && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isActive: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isActive"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isActive && isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right"))))); }; exports.Basic = Basic; /* With Border */ var WithBorder = function (args) { var Thead = ScrollTable_1.default.Thead, Tbody = ScrollTable_1.default.Tbody, Tr = ScrollTable_1.default.Tr, Th = ScrollTable_1.default.Th, Td = ScrollTable_1.default.Td; return (react_1.default.createElement(ScrollTable_1.default, __assign({}, args, { hasBorder: true }), react_1.default.createElement(Thead, null, react_1.default.createElement(Tr, null, react_1.default.createElement(Th, { rowSpan: 2 }, "RS"), react_1.default.createElement(Th, { rowSpan: 2 }, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."), react_1.default.createElement(Th, { rowSpan: 2 }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Th, { rowSpan: 2 }, "Button"), react_1.default.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"), react_1.default.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments")), react_1.default.createElement(Tr, null, react_1.default.createElement(Th, { align: 'left' }, "align left"), react_1.default.createElement(Th, { align: 'center', isResizable: true }, "align center"), react_1.default.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))), react_1.default.createElement(Tbody, null, react_1.default.createElement(Tr, null, react_1.default.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"), react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "Text"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "Text && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isDisabled && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, null, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "Link")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "isDisabled Link")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "Link && isActionable")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "isDisabled Link && isActionable")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isDisabled && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isActive: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isActive"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isActive && isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right"))))); }; exports.WithBorder = WithBorder; /* Set Width And Height */ var SetWidthAndHeight = function (args) { var Thead = ScrollTable_1.default.Thead, Tbody = ScrollTable_1.default.Tbody, Tr = ScrollTable_1.default.Tr, Th = ScrollTable_1.default.Th, Td = ScrollTable_1.default.Td; return (react_1.default.createElement(ScrollTable_1.default, __assign({}, args, { hasWordWrap: false, style: { width: 300, height: 300, } }), react_1.default.createElement(Thead, null, react_1.default.createElement(Tr, null, react_1.default.createElement(Th, { rowSpan: 2 }, "RS"), react_1.default.createElement(Th, { rowSpan: 2 }, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."), react_1.default.createElement(Th, { rowSpan: 2 }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Th, { rowSpan: 2 }, "Button"), react_1.default.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"), react_1.default.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments")), react_1.default.createElement(Tr, null, react_1.default.createElement(Th, { align: 'left' }, "align left"), react_1.default.createElement(Th, { align: 'center', isResizable: true }, "align center"), react_1.default.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))), react_1.default.createElement(Tbody, null, react_1.default.createElement(Tr, null, react_1.default.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"), react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "Text"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "Text && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isDisabled && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, null, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "Link")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "isDisabled Link")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "Link && isActionable")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement("a", { href: '#' }, "isDisabled Link && isActionable")), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, { isSelected: true })), react_1.default.createElement(Td, null, "isSelected && isDisabled && isActionable"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isActive: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isActive"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small' }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right")), react_1.default.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true }, react_1.default.createElement(Td, null, react_1.default.createElement(Checkbox_1.default, null)), react_1.default.createElement(Td, null, "isActive && isDisabled"), react_1.default.createElement(Td, { hasBorderLeft: true, hasBorderRight: true }, react_1.default.createElement(SuccessIcon_1.default, null)), react_1.default.createElement(Td, null, react_1.default.createElement(Button_1.default, { size: 'small', isDisabled: true }, "button")), react_1.default.createElement(Td, null, "Sorted Column"), react_1.default.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"), react_1.default.createElement(Td, { align: 'center' }, "align center"), react_1.default.createElement(Td, { align: 'right' }, "align right"))))); }; exports.SetWidthAndHeight = SetWidthAndHeight; /* Full Width */ var FullWidth = function (args) { var Thead = ScrollTable_1.default.Thead, Tbody = ScrollTable_1.default.Tbody, Tr = ScrollTable_1.default.Tr, Th = ScrollTable_1.default.Th, Td = ScrollTable_1.default.Td; return (react_1.default.createElement(ScrollTable_1.default, __assign({}, args, { hasWordWrap: false }), react_1.default.createElement(Thead, null, react_1.default.createElement(Tr, null, react_1.default.createElement(Th, { rowSpan: 2 }, "RS"), react_1.default.createElement(Th, { rowSpan: 2 }, react_1.default.createElement(Checkbox_1.default, null)), react_1