- ${Thumbnail({
- size: "300",
- imageURL: "example-card-landscape.png",
- isCover: true,
- }, context)}
-
${content}
+
+ ${visualElement === "thumbnail" ?
+ Thumbnail({
+ size: ({
+ compact: "75",
+ regular: "100",
+ spacious: "200",
+ }[density] || "100"),
+ imageURL: "example-card-landscape.png",
+ isCover: true,
+ }, context)
+ : visualElement === "avatar" ?
+ Avatar({
+ size: ({
+ compact: "50",
+ regular: "75",
+ spacious: "100",
+ }[density] || "75"),
+ imageURL: "example-card-landscape.png",
+ isCover: true,
+ }, context)
+ : visualElement === "icon" ?
+ Icon({
+ iconName: "Image",
+ setName: "workflow",
+ }, context)
+ : null}
+
${content}
`;
}
@@ -61,6 +89,11 @@ export const TableRowItem = ({
}
};
+ // For each column, apply the text alignment specified in textAlignment
+ const getTextAlignment = (columnIndex) => {
+ return textAlignment?.[columnIndex] || "start";
+ };
+
return html`
<${rowTag}
class=${classMap({
@@ -68,9 +101,9 @@ export const TableRowItem = ({
[`${rootClass}-row--summary`]: isSummaryRow,
[`${rootClass}-row--sectionHeader`]: isSectionHeader,
[`${rootClass}-row--collapsible`]: isCollapsible,
- [`${rootClass}-row--thumbnail`]: useThumbnail,
[`${rootClass}-cell--divider`]: useColumnDividers,
["is-selected"]: isSelected,
+ ["is-focused"]: isFocused,
["is-expanded"]: isExpanded,
["is-last-tier"]: isLastTier,
["is-drop-target"]: isDropTarget,
@@ -87,12 +120,14 @@ export const TableRowItem = ({
class=${classMap({
[`${rootClass}-cell`]: true,
[`${rootClass}-checkboxCell`]: true,
+ [`${rootClass}-cell--alignEnd`]: getTextAlignment(0) === "end",
+ ...cellCustomClasses?.[0]?.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
>
${when(!isSummaryRow, () =>
Checkbox({
- size,
- isEmphasized: tableIsEmphasized,
+ size: "m",
+ isEmphasized,
isChecked: isSelected,
customClasses: [`${rootClass}-checkbox`],
}, context)
@@ -101,41 +136,47 @@ export const TableRowItem = ({
)}
${isCollapsible
- ? html`
- <${cellTag}
- role=${ifDefined(showCheckbox ? "gridcell" : useDivs ? "cell" : undefined)}
- class=${classMap({
- [`${rootClass}-cell`]: true,
- [`${rootClass}-cell--collapsible`]: true,
- [`${rootClass}-cell--thumbnail`]: useThumbnail,
- [`${rootClass}-cell--divider`]: useColumnDividers,
- })}
- >
-
- ${when(!isLastTier, () =>
- Button({
- size,
- iconName: "ChevronRight100",
- iconSet: "ui",
- hideLabel: true,
- customClasses: [`${rootClass}-disclosureIcon`],
- ariaExpanded: isExpanded,
- ariaControls,
- }, context)
- )}
- ${useThumbnail ? getCellContent(0) : html`
${getCellContent(0)}
`}
-
- `
- : html`
- <${cellTag}
- role=${ifDefined(showCheckbox ? "gridcell" : useDivs ? "cell" : undefined)}
- class=${classMap({
- [`${rootClass}-cell`]: true,
- [`${rootClass}-cell--thumbnail`]: useThumbnail,
- [`${rootClass}-cell--divider`]: useColumnDividers,
- })}
- colspan=${ifDefined(isSectionHeader && showCheckbox ? "4" : isSectionHeader ? "3" : undefined)}
- >${getCellContent(0)}`
+ ? html`
+ <${cellTag}
+ role=${ifDefined(showCheckbox ? "gridcell" : useDivs ? "cell" : undefined)}
+ class=${classMap({
+ [`${rootClass}-cell`]: true,
+ [`${rootClass}-cell--collapsible`]: true,
+ [`${rootClass}-cell--visual`]: useVisuals,
+ [`${rootClass}-cell--divider`]: useColumnDividers,
+ [`${rootClass}-cell--alignEnd`]: getTextAlignment(0) === "end",
+ ...cellCustomClasses?.[showCheckbox ? 1 : 0]?.reduce((a, c) => ({ ...a, [c]: true }), {}),
+ })}
+ >
+
+ ${when(!isLastTier, () =>
+ Button({
+ size: "m",
+ iconName: "ChevronRight100",
+ iconSet: "ui",
+ hideLabel: true,
+ customClasses: [`${rootClass}-disclosureIcon`],
+ ariaExpanded: isExpanded,
+ ariaControls,
+ }, context)
+ )}
+ ${useVisuals ? getCellContent(0) : html`
${getCellContent(0)}
`}
+
+ `
+ : html`
+ <${cellTag}
+ role=${ifDefined(showCheckbox ? "gridcell" : useDivs ? "cell" : undefined)}
+ class=${classMap({
+ [`${rootClass}-cell`]: true,
+ [`${rootClass}-cell--visual`]: useVisuals,
+ [`${rootClass}-cell--divider`]: useColumnDividers,
+ [`${rootClass}-cell--alignEnd`]: getTextAlignment(0) === "end",
+ ...cellCustomClasses?.[showCheckbox ? 1 : 0]?.reduce((a, c) => ({ ...a, [c]: true }), {}),
+ })}
+ colspan=${ifDefined(isSectionHeader && showCheckbox ? "4" : isSectionHeader ? "3" : undefined)}
+ >
+ ${getCellContent(0)}
+ `
}
${when(!isSectionHeader, () => html`
@@ -143,8 +184,10 @@ export const TableRowItem = ({
role=${ifDefined(showCheckbox ? "gridcell" : useDivs ? "cell" : undefined)}
class=${classMap({
[`${rootClass}-cell`]: true,
- [`${rootClass}-cell--thumbnail`]: useThumbnail,
+ [`${rootClass}-cell--visual`]: useVisuals,
[`${rootClass}-cell--divider`]: useColumnDividers,
+ [`${rootClass}-cell--alignEnd`]: getTextAlignment(1) === "end",
+ ...cellCustomClasses?.[showCheckbox ? 2 : 1]?.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
>${getCellContent(1)}
@@ -153,6 +196,8 @@ export const TableRowItem = ({
class=${classMap({
[`${rootClass}-cell`]: true,
[`${rootClass}-cell--divider`]: useColumnDividers,
+ [`${rootClass}-cell--alignEnd`]: getTextAlignment(2) === "end",
+ ...cellCustomClasses?.[showCheckbox ? 3 : 2]?.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
>${getCellContent(2)}`
)}
@@ -162,20 +207,54 @@ export const TableRowItem = ({
export const Template = ({
rootClass = "spectrum-Table",
- size = "m",
- density = "standard",
+ density = "regular",
isQuiet = false,
isEmphasized = true,
+ isLoading = false,
useDivs = false,
+ selectionMode = "none",
useScroller = false,
- showThumbnails = false,
+ visualElement,
isDropTarget = false,
hasColumnDividers = false,
+ isSortable = false,
+ sortIcon = "Sort",
+ hasMenu = false,
rowItems = [],
customClasses = [],
id = getRandomId("table"),
} = {}, context = {}) => {
- if (!rowItems || !rowItems.length) return html``;
+
+ // Empty state
+ if (!rowItems || !rowItems.length) return html`
+ ${IllustratedMessage({
+ illustration: "NoData",
+ illustrationSet: "workflow",
+ title: "Empty state title",
+ description: "No data to display. Description of status. Give more information about what a user can do or expect, or how to make items appear here.",
+ isHorizontal: true,
+ hasButtons: true,
+ size: ({
+ "compact": "s",
+ "regular": "m",
+ "spacious": "l",
+ }[density] || "regular"),
+ }, context)}
+ `;
+
+ // Loading state
+ if (isLoading) {
+ return html`
+ ${ProgressCircle({
+ size: ({
+ "compact": "s",
+ "regular": "m",
+ "spacious": "l",
+ }[density] || "regular"),
+ isIndeterminate: true,
+ }, context)}
+ `;
+ }
// Use Table tags or Div tags.
const tableTag = useDivs ? literal`div` : literal`table`;
@@ -185,7 +264,6 @@ export const Template = ({
const thTag = useDivs ? literal`div` : literal`th`;
const rootClassMapVariants = {
- [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
[`${rootClass}--${density}`]: density !== "standard",
[`${rootClass}--quiet`]: isQuiet,
[`${rootClass}--emphasized`]: isEmphasized,
@@ -193,6 +271,7 @@ export const Template = ({
};
const useCheckboxCell = rowItems.some((item) => item.showCheckbox === true);
+ const ariaSortValue = sortIcon === "SortUp" ? "ascending" : sortIcon === "SortDown" ? "descending" : "none";
const tableHtml = html`
<${tableTag}
@@ -203,8 +282,7 @@ export const Template = ({
})}
id=${ifDefined(id)}
role=${ifDefined(useCheckboxCell ? "grid" : useDivs ? "table" : undefined)}
- aria-multiselectable=${ifDefined(useCheckboxCell ? "true" : undefined)}
- style="max-width: 800px;"
+ aria-multiselectable=${ifDefined(selectionMode === "multiple" ? "true" : undefined)}
>
<${theadTag}
class="${rootClass}-head"
@@ -212,57 +290,67 @@ export const Template = ({
>
<${rowTag}
role=${ifDefined(useDivs ? "row" : undefined)}
+ class="${rootClass}-headRow"
>
${when(useCheckboxCell, () => html`
<${thTag}
class="spectrum-Table-headCell spectrum-Table-checkboxCell"
role=${ifDefined(useDivs ? "columnheader" : undefined)}
>
- ${Checkbox({
- size,
- isEmphasized: isEmphasized,
- isChecked: false,
- isIndeterminate: true,
- customClasses: [`${rootClass}-checkbox`],
+ ${when(selectionMode === "multiple", () => html`
+ ${Checkbox({
+ size: "m",
+ isEmphasized: isEmphasized,
+ isChecked: false,
+ isIndeterminate: true,
+ customClasses: [`${rootClass}-checkbox`],
}, context)}
- `
+ `)}
+ `,
)}
<${thTag}
- class="${rootClass}-headCell is-sortable is-sorted-desc"
+ class=${classMap({
+ [`${rootClass}-headCell`]: true,
+ ["is-sortable"]: isSortable,
+ ["is-sorted-asc"]: sortIcon === "SortUp",
+ ["is-sorted-desc"]: sortIcon === "SortDown",
+ [`${rootClass}-hasMenuButton`]: hasMenu,
+ })}
role=${ifDefined(useDivs ? "columnheader" : undefined)}
- aria-sort="descending"
- tabindex="0"
+ aria-sort=${ifDefined(isSortable || hasMenu ? ariaSortValue : undefined)}
>
- ${Icon({
- iconName: "ArrowDown100",
- setName: "ui",
- size,
- customClasses: [`${rootClass}-sortedIcon`],
- }, context)}
Column title${
- Icon({
- iconName: "ChevronDown100",
- setName: "ui",
- size,
- customClasses: [`${rootClass}-menuIcon`],
- }, context)}
+ ${when(hasMenu || isSortable, () => html`
+ ${when(isSortable, () => Button({
+ size: "m",
+ iconName: sortIcon,
+ iconSet: "workflow",
+ label: "Column title",
+ customClasses: [`${rootClass}-sortButton`],
+ }, context)
+ )}
+ ${when(!isSortable, () => Button({
+ size: "m",
+ iconName: "SortUp",
+ iconSet: "workflow",
+ label: "Column title",
+ customClasses: [`${rootClass}-sortButton`],
+ }, context)
+ )}
+ `, () => html`
Column title`
+ )}
<${thTag}
- class="${rootClass}-headCell is-sortable"
+ class="${rootClass}-headCell"
role=${ifDefined(useDivs ? "columnheader" : undefined)}
- aria-sort="none"
- tabindex="0"
>
- ${Icon({
- iconName: "ArrowDown100",
- setName: "ui",
- size,
- customClasses: [`${rootClass}-sortedIcon`],
- }, context)}
Column title
+
Column title
<${thTag}
class="${rootClass}-headCell"
role=${ifDefined(useDivs ? "columnheader" : undefined)}
- >Column title
+ >
+
Column title
+
<${tbodyTag}
@@ -275,11 +363,12 @@ export const Template = ({
${rowItems.map((item) =>
TableRowItem({
rootClass,
- size,
+ density,
useDivs,
- showThumbnails,
+ visualElement,
hasColumnDividers,
- tableIsEmphasized: isEmphasized,
+ hasMenu,
+ isEmphasized,
...item,
}, context)
)}