@dhis2-ui/table 10.16.1 → 10.16.3-alpha.1

package/src/data-table/table-elements/table-header-cell-action.js

@@ -0,0 +1,62 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const TableHeaderCellAction = forwardRef(
+    (
+        {
+            onClick,
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tableheadercellaction',
+            title,
+            ...props
+        },
+        ref
+    ) => (
+        <button
+            {...props}
+            className={className}
+            data-test={dataTest}
+            onClick={onClick}
+            title={title}
+            ref={ref}
+        >
+            {children}
+            <style jsx>{`
+                button {
+                    border: none;
+                    padding: 0;
+                    background: transparent;
+                    width: 24px;
+                    height: 24px;
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    cursor: pointer;
+                    border-radius: 4px;
+                    margin-inline-start: 2px;
+                }
+                button:hover,
+                button:focus-visible {
+                    background: ${colors.grey400};
+                }
+                button:active,
+                button:focus {
+                    outline: none;
+                }
+            `}</style>
+        </button>
+    )
+)
+
+TableHeaderCellAction.displayName = 'TableHeaderCellAction'
+
+TableHeaderCellAction.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    title: PropTypes.string,
+    onClick: PropTypes.func,
+}

package/src/data-table/table-elements/table-row.js

@@ -0,0 +1,52 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const TableRow = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablerow',
+            draggable,
+            role,
+            selected,
+            ...props
+        },
+        ref
+    ) => (
+        <tr
+            {...props}
+            ref={ref}
+            className={cx(className, {
+                selected,
+                draggable,
+            })}
+            data-test={dataTest}
+            role={role}
+        >
+            {children}
+            <style jsx>{`
+                :global(tbody) > tr.draggable,
+                :global(tfoot) > tr.draggable {
+                    cursor: move;
+                    user-select: none;
+                }
+            `}</style>
+        </tr>
+    )
+)
+
+TableRow.displayName = 'TableRow'
+
+TableRow.propTypes = {
+    /** Should be `<TableDataCell>` or `<TableDataCellHead>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Applies draggable cursor styles */
+    draggable: PropTypes.bool,
+    role: PropTypes.string,
+    /** Sets a selected (teal) background color */
+    selected: PropTypes.bool,
+}

package/src/data-table/table-elements/table-scroll-box.js

@@ -0,0 +1,41 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const TableScrollBox = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tablescrollbox',
+            maxHeight = 'auto',
+            maxWidth = 'auto',
+            ...props
+        },
+        ref
+    ) => (
+        <div {...props} className={className} data-test={dataTest} ref={ref}>
+            {children}
+            <style jsx>{`
+                div {
+                    border: 1px solid ${colors.grey300};
+                    border-top: none;
+                    box-sizing: border-box;
+                    max-height: ${maxHeight};
+                    max-width: ${maxWidth};
+                    overflow: auto;
+                }
+            `}</style>
+        </div>
+    )
+)
+
+TableScrollBox.displayName = 'TableScrollBox'
+
+TableScrollBox.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    maxHeight: PropTypes.string,
+    maxWidth: PropTypes.string,
+}

package/src/data-table/table-elements/table-toolbar.js

@@ -0,0 +1,50 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const TableToolbar = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-tabletoolbar',
+            position = 'top',
+            ...props
+        },
+        ref
+    ) => (
+        <div
+            {...props}
+            data-test={dataTest}
+            className={cx(className, position)}
+            ref={ref}
+        >
+            {children}
+            <style jsx>{`
+                div {
+                    width: 100%;
+                    box-sizing: border-box;
+                    display: flex;
+                    border: 1px solid ${colors.grey300};
+                    padding: ${spacers.dp12};
+                }
+                div.top {
+                    border-bottom: none;
+                }
+                div.bottom {
+                    border-top: none;
+                }
+            `}</style>
+        </div>
+    )
+)
+
+TableToolbar.displayName = 'TableToolbar'
+
+TableToolbar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    position: PropTypes.oneOf(['top', 'bottom']),
+}

package/src/data-table/table-elements/table.e2e.stories.js

@@ -0,0 +1,190 @@
+import React from 'react'
+import { TableBody } from './table-body.js'
+import { TableDataCell } from './table-data-cell/table-data-cell.js'
+import { TableHead } from './table-head.js'
+import { TableHeaderCell } from './table-header-cell/table-header-cell.js'
+import { TableRow } from './table-row.js'
+import { TableScrollBox } from './table-scroll-box.js'
+import { Table } from './table.js'
+
+export default {
+    title: 'Table',
+    component: Table,
+}
+
+export const FixedHeaderAndColumns = () => (
+    <TableScrollBox maxHeight="350px" maxWidth="500px">
+        <Table layout="fixed" borderless width="1000px">
+            <TableHead>
+                <TableRow>
+                    <TableHeaderCell fixed top="0" left="0" width="120px">
+                        Header fixed-left 1
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed top="0" left="120px">
+                        Header fixed-left 2
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed top="0">
+                        Header fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed top="0">
+                        Header fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed top="0">
+                        Header fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed top="0">
+                        Header fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed top="0">
+                        Header fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed top="0">
+                        Header fixed
+                    </TableHeaderCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>scrolling top-left</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>scrolling top-right</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                </TableRow>
+                <TableRow>
+                    <TableHeaderCell fixed left="0" width="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableHeaderCell fixed left="120px">
+                        fixed
+                    </TableHeaderCell>
+                    <TableDataCell>scrolling bottom-left</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>...</TableDataCell>
+                    <TableDataCell>scrolling bottom-right</TableDataCell>
+                </TableRow>
+            </TableBody>
+        </Table>
+    </TableScrollBox>
+)

package/src/data-table/table-elements/table.js

@@ -0,0 +1,70 @@
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const Table = forwardRef(
+    (
+        {
+            children,
+            className,
+            dataTest = 'dhis2-uicore-table',
+            layout = 'auto',
+            role,
+            borderless,
+            width = '100%',
+            ...props
+        },
+        ref
+    ) => (
+        <table
+            {...props}
+            className={cx(className, { borderless })}
+            data-test={dataTest}
+            ref={ref}
+            role={role}
+        >
+            {children}
+            <style jsx>{`
+                table {
+                    table-layout: ${layout};
+                    border-collapse: separate;
+                    border-spacing: 0;
+                    width: ${width};
+                    box-sizing: border-box;
+                    border: 1px solid ${colors.grey300};
+                }
+                table.borderless {
+                    border: none;
+                }
+            `}</style>
+        </table>
+    )
+)
+
+Table.displayName = 'Table'
+
+Table.propTypes = {
+    /**
+     * Removes border from the table
+     */
+    borderless: PropTypes.bool,
+    /**
+     * Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components
+     */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /**
+     * Sets the `table-layout` property. Switching to `fixed` can prevent style
+     * issues when dealing with a table with multiple frozen columns or when dealing
+     * with filter elements in the table headers.
+     */
+    layout: PropTypes.oneOf(['auto', 'fixed', 'initial', 'inherit']),
+    role: PropTypes.string,
+    /**
+     * Sets the `width` property. Providing an explicit width can prevent style
+     * issues when dealing with horizontally scrolling tables with a fixed layout.
+     */
+    width: PropTypes.string,
+}