lucid-ui/dist/cjs/components/Table/Table.stories.js

A UI component library from Xandr.

"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.NoHover = exports.WithEmptyColumn = exports.WithBorder = exports.Compressed = exports.GrayHeader = exports.Standard = exports.Basic = void 0;
var react_1 = __importDefault(require("react"));
var Table_1 = __importDefault(require("./Table"));
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/Table',
    component: Table_1.default,
    parameters: {
        docs: {
            description: {
                component: Table_1.default.peek.description,
            },
        },
    },
    args: Table_1.default.defaultProps,
};
var Basic = function (args) { return (react_1.default.createElement(Table_1.default, __assign({}, args),
    react_1.default.createElement(Table_1.default.Thead, null,
        react_1.default.createElement(Table_1.default.Tr, null,
            react_1.default.createElement(Table_1.default.Th, null,
                react_1.default.createElement(Checkbox_1.default, null)),
            react_1.default.createElement(Table_1.default.Th, null, "Lorem"),
            react_1.default.createElement(Table_1.default.Th, null, "Ipsum"),
            react_1.default.createElement(Table_1.default.Th, null, "Solit"),
            react_1.default.createElement(Table_1.default.Th, null, "Dolar"))),
    react_1.default.createElement(Table_1.default.Tbody, null,
        react_1.default.createElement(Table_1.default.Tr, null,
            react_1.default.createElement(Table_1.default.Td, null,
                react_1.default.createElement(Checkbox_1.default, null)),
            react_1.default.createElement(Table_1.default.Td, null, "Bar"),
            react_1.default.createElement(Table_1.default.Td, null, "Foo"),
            react_1.default.createElement(Table_1.default.Td, null, "FooBar"),
            react_1.default.createElement(Table_1.default.Td, null, "BarFoo"))))); };
exports.Basic = Basic;
/* Standard */
var Standard = function (args) {
    var Thead = Table_1.default.Thead, Tbody = Table_1.default.Tbody, Tr = Table_1.default.Tr, Th = Table_1.default.Th, Td = Table_1.default.Td;
    return (react_1.default.createElement(Table_1.default, __assign({}, args),
        react_1.default.createElement(Thead, null,
            react_1.default.createElement(Tr, null,
                react_1.default.createElement(Th, { rowSpan: 2 },
                    react_1.default.createElement(Checkbox_1.default, null)),
                react_1.default.createElement(Th, { rowSpan: 2, isSortable: true }, "Lorem."),
                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' }, "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' }, "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, 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, { isActive: true },
                react_1.default.createElement(Td, null,
                    react_1.default.createElement(Checkbox_1.default, null)),
                react_1.default.createElement(Td, null, "Row active"),
                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.Standard = Standard;
/* Gray Header */
var GrayHeader = function (args) {
    var Thead = Table_1.default.Thead, Tbody = Table_1.default.Tbody, Tr = Table_1.default.Tr, Th = Table_1.default.Th, Td = Table_1.default.Td;
    return (react_1.default.createElement(Table_1.default, __assign({}, args, { hasLightHeader: 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.default.createElement(Th, { rowSpan: 2, isSortable: true }, "Lorem."),
                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' }, "Sorted Column"),
                react_1.default.createElement(Th, { align: 'left' }, "align left"),
                react_1.default.createElement(Th, { align: 'center' }, "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.GrayHeader = GrayHeader;
/* Compressed */
var Compressed = function (args) {
    var Thead = Table_1.default.Thead, Tbody = Table_1.default.Tbody, Tr = Table_1.default.Tr, Th = Table_1.default.Th, Td = Table_1.default.Td;
    return (react_1.default.createElement(Table_1.default, __assign({}, args, { density: 'compressed' }),
        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.createElem