@atlaskit/dynamic-table
Version:
A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.
79 lines (78 loc) • 3.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/* eslint-disable @repo/internal/react/require-jsdoc */
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { forwardRef } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { row, tableBorder } from '../theme';
// CSS vars for table row
// these are declared here to avoid being re-declared in each table row
export const tableRowCSSVars = {
CSS_VAR_HOVER_BACKGROUND: '--local-dynamic-table-hover-bg',
CSS_VAR_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-highlighted-bg',
CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND: '--local-dynamic-table-hover-highlighted-bg',
CSS_VAR_ROW_FOCUS_OUTLINE: '--local-dynamic-table-row-focus-outline'
};
const fixedSizeTableStyles = css({
tableLayout: 'fixed'
});
const tableStyles = css({
width: '100%',
borderCollapse: 'separate',
borderSpacing: '0px'
});
const bodyBorder = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
borderBlockEnd: `2px solid ${tableBorder.borderColor}`
});
export const Table = /*#__PURE__*/forwardRef(({
isFixedSize,
hasDataRow,
children,
testId,
isLoading,
...rest
}, ref) => {
return jsx("table", _extends({
inert: isLoading ? '' : undefined,
style: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
[tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND]: row.hoverBackground,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
[tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND]: row.highlightedBackground,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
[tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND]: row.hoverHighlightedBackground,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
[tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE]: row.focusOutline
},
css: [tableStyles, isFixedSize && fixedSizeTableStyles, hasDataRow && bodyBorder],
ref: ref
}, rest, {
"data-testid": testId && `${testId}--table`
}), children);
});
const captionStyles = css({
font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
marginBlockEnd: "var(--ds-space-100, 8px)",
marginBlockStart: "var(--ds-space-300, 24px)",
willChange: 'transform'
});
export const Caption = ({
children
}) => jsx("caption", {
css: captionStyles
}, children);
const paginationWrapperStyles = css({
display: 'flex',
justifyContent: 'center'
});
export const PaginationWrapper = ({
children,
testId
}) => jsx("div", {
css: paginationWrapperStyles,
"data-testid": testId && `${testId}--pagination--container`
}, children);