lucid-ui
Version:
A UI component library from Xandr.
1,141 lines • 77.5 kB
JavaScript
import React from 'react';
import ScrollTable from './ScrollTable';
import Checkbox from '../Checkbox/Checkbox';
import SuccessIcon from '../Icon/SuccessIcon/SuccessIcon';
import Button from '../Button/Button';
export default {
title: 'Table/ScrollTable',
component: ScrollTable,
parameters: {
docs: {
description: {
component: ScrollTable.peek.description,
},
},
},
args: ScrollTable.defaultProps,
};
/* Basic */
export const Basic = (args) => {
const { Thead, Tbody, Tr, Th, Td } = ScrollTable;
return (React.createElement(ScrollTable, { ...args },
React.createElement(Thead, null,
React.createElement(Tr, null,
React.createElement(Th, { rowSpan: 2 }, "RS"),
React.createElement(Th, { rowSpan: 2 },
React.createElement(Checkbox, null)),
React.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."),
React.createElement(Th, { rowSpan: 2 },
React.createElement(SuccessIcon, null)),
React.createElement(Th, { rowSpan: 2 }, "Button"),
React.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"),
React.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments")),
React.createElement(Tr, null,
React.createElement(Th, { align: 'left' }, "align left"),
React.createElement(Th, { align: 'center', isResizable: true }, "align center"),
React.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))),
React.createElement(Tbody, null,
React.createElement(Tr, null,
React.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"),
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, null,
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")))));
};
/* With Border */
export const WithBorder = (args) => {
const { Thead, Tbody, Tr, Th, Td } = ScrollTable;
return (React.createElement(ScrollTable, { ...args, hasBorder: true },
React.createElement(Thead, null,
React.createElement(Tr, null,
React.createElement(Th, { rowSpan: 2 }, "RS"),
React.createElement(Th, { rowSpan: 2 },
React.createElement(Checkbox, null)),
React.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."),
React.createElement(Th, { rowSpan: 2 },
React.createElement(SuccessIcon, null)),
React.createElement(Th, { rowSpan: 2 }, "Button"),
React.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"),
React.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments")),
React.createElement(Tr, null,
React.createElement(Th, { align: 'left' }, "align left"),
React.createElement(Th, { align: 'center', isResizable: true }, "align center"),
React.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))),
React.createElement(Tbody, null,
React.createElement(Tr, null,
React.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"),
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, null,
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")))));
};
/* Set Width And Height */
export const SetWidthAndHeight = (args) => {
const { Thead, Tbody, Tr, Th, Td } = ScrollTable;
return (React.createElement(ScrollTable, { ...args, hasWordWrap: false, style: {
width: 300,
height: 300,
} },
React.createElement(Thead, null,
React.createElement(Tr, null,
React.createElement(Th, { rowSpan: 2 }, "RS"),
React.createElement(Th, { rowSpan: 2 },
React.createElement(Checkbox, null)),
React.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."),
React.createElement(Th, { rowSpan: 2 },
React.createElement(SuccessIcon, null)),
React.createElement(Th, { rowSpan: 2 }, "Button"),
React.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"),
React.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments")),
React.createElement(Tr, null,
React.createElement(Th, { align: 'left' }, "align left"),
React.createElement(Th, { align: 'center', isResizable: true }, "align center"),
React.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))),
React.createElement(Tbody, null,
React.createElement(Tr, null,
React.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"),
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, null,
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")))));
};
/* Full Width */
export const FullWidth = (args) => {
const { Thead, Tbody, Tr, Th, Td } = ScrollTable;
return (React.createElement(ScrollTable, { ...args, hasWordWrap: false },
React.createElement(Thead, null,
React.createElement(Tr, null,
React.createElement(Th, { rowSpan: 2 }, "RS"),
React.createElement(Th, { rowSpan: 2 },
React.createElement(Checkbox, null)),
React.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."),
React.createElement(Th, { rowSpan: 2 },
React.createElement(SuccessIcon, null)),
React.createElement(Th, { rowSpan: 2 }, "Button"),
React.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"),
React.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column"),
React.createElement(Th, { rowSpan: 2 }, "Extra Column")),
React.createElement(Tr, null,
React.createElement(Th, { align: 'left' }, "align left"),
React.createElement(Th, { align: 'center', isResizable: true }, "align center"),
React.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))),
React.createElement(Tbody, null,
React.createElement(Tr, null,
React.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"),
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, null,
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isActionable: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isSelected: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isSelected: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isSelected: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isActionable: true, isActive: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")),
React.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column"),
React.createElement(Td, null, "Extra Column")))));
};
/* Set Table Width */
export const SetTableWidth = (args) => {
const { Thead, Tbody, Tr, Th, Td } = ScrollTable;
return (React.createElement(ScrollTable, { ...args, tableWidth: 2000 },
React.createElement(Thead, null,
React.createElement(Tr, null,
React.createElement(Th, { rowSpan: 2 }, "RS"),
React.createElement(Th, { rowSpan: 2 },
React.createElement(Checkbox, null)),
React.createElement(Th, { rowSpan: 2, isSortable: true, isResizable: true }, "Sortable and resizable."),
React.createElement(Th, { rowSpan: 2 },
React.createElement(SuccessIcon, null)),
React.createElement(Th, { rowSpan: 2 }, "Button"),
React.createElement(Th, { rowSpan: 2, isSorted: true, sortDirection: 'up', isResizable: true }, "Sorted Column"),
React.createElement(Th, { colSpan: 3, align: 'center' }, "Alignments")),
React.createElement(Tr, null,
React.createElement(Th, { align: 'left' }, "align left"),
React.createElement(Th, { align: 'center', isResizable: true }, "align center"),
React.createElement(Th, { align: 'right', isSortable: true, isSorted: true }, "align right"))),
React.createElement(Tbody, null,
React.createElement(Tr, null,
React.createElement(Td, { rowSpan: 14, hasBorderRight: true }, "RS"),
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "Text && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, null,
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null,
React.createElement("a", { href: '#' }, "isDisabled Link && isActionable")),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isSelected: true, isDisabled: true, isActionable: true },
React.createElement(Td, null,
React.createElement(Checkbox, { isSelected: true })),
React.createElement(Td, null, "isSelected && isDisabled && isActionable"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small' }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")),
React.createElement(Tr, { isActionable: true, isActive: true, isDisabled: true },
React.createElement(Td, null,
React.createElement(Checkbox, null)),
React.createElement(Td, null, "isActive && isDisabled"),
React.createElement(Td, { hasBorderLeft: true, hasBorderRight: true },
React.createElement(SuccessIcon, null)),
React.createElement(Td, null,
React.createElement(Button, { size: 'small', isDisabled: true }, "button")),
React.createElement(Td, null, "Sorted Column"),
React.createElement(Td, { align: 'left', hasBorderLeft: true }, "align left"),
React.createElement(Td, { align: 'center' }, "align center"),
React.createElement(Td, { align: 'right' }, "align right")))));
};
//# sourceMappingURL=ScrollTable.stories.js.map