Merge pull request #804 from buildo/table_footers

Allow Table columns to have footers

Author: federico-ercoles

packages/bento-design-system/src/Table/Config.ts

@@ -13,6 +13,8 @@ export type TableConfig = {
   emptyIcon: (props: IconProps) => JSX.Element;
   headerBackgroundColor: BentoSprinkles["background"];
   headerForegroundColor: BentoSprinkles["color"];
+  footerBackgroundColor: BentoSprinkles["background"];
+  footerForegroundColor: BentoSprinkles["color"];
   hintPlacement: TooltipPlacement;
   cellTooltipPlacement: TooltipPlacement;
   evenRowsBackgroundColor: BentoSprinkles["background"];
@@ -22,6 +24,7 @@ export type TableConfig = {
   selectedRowBackgroundColor: keyof typeof vars.backgroundColor;
   padding: {
     header: CellPaddingConfig;
+    footer: CellPaddingConfig;
     defaultCell: CellPaddingConfig;
     buttonCell: CellPaddingConfig | undefined;
     buttonLinkCell: CellPaddingConfig | undefined;

packages/bento-design-system/src/Table/Table.css.ts

@@ -1,6 +1,7 @@
 import { createVar, style } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal";
 import { strictRecipe } from "../util/strictRecipe";
+import { vars } from "../vars.css";
 
 export const table = style({
   gridAutoRows: "max-content",
@@ -21,6 +22,18 @@ export const columnHeader = bentoSprinkles({
   height: "full",
 });
 
+export const columnFooter = style([
+  {
+    boxShadow: `inset 0px 1px 0px ${vars.outlineColor.outlineDecorative}`,
+  },
+  bentoSprinkles({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: "full",
+  }),
+]);
+
 export const sortIconContainer = style({
   filter: "opacity(80%)",
 });
@@ -36,6 +49,15 @@ export const stickyColumnHeader = style([
   }),
 ]);
 
+export const stickyColumnFooter = style([
+  {
+    bottom: 0,
+  },
+  bentoSprinkles({
+    position: "sticky",
+  }),
+]);
+
 export const rowContainer = style({
   // NOTE(gabro): this allows us to use the entire row as a parent selector,
   // for applying a hover effect on all of its children or clicking on row,

packages/bento-design-system/src/Table/Table.tsx

@@ -31,13 +31,15 @@ import {
 } from "..";
 import {
   cellContainerRecipe,
+  columnFooter,
   columnHeader,
   lastLeftStickyColumn,
   rowContainer,
   sectionHeader,
   sectionHeaderContainer,
   selectedRowBackgroundColor,
   sortIconContainer,
+  stickyColumnFooter,
   stickyColumnHeader,
   stickyTopHeight,
   table,
@@ -104,6 +106,7 @@ type Props<
   noResultsFeedbackSize?: FeedbackProps["size"];
   initialSorting?: Array<SortingRule<C>>;
   stickyHeaders?: boolean;
+  stickyFooters?: boolean;
   height?: { custom: string | number };
   onRowPress?: (row: Row<RowType<C>>) => void;
   virtualizeRows?: boolean | { estimateRowHeight: (index: number) => number };
@@ -143,6 +146,7 @@ export function Table<
   onSort,
   initialSorting,
   stickyHeaders,
+  stickyFooters = true,
   height,
   onRowPress,
   virtualizeRows: virtualizeRowsConfig,
@@ -417,6 +421,8 @@ export function Table<
     }
   });
 
+  const hasFooters = headerGroups.at(-1)?.headers.some((h) => h.Footer);
+
   return (
     <Box
       {...getTableProps()}
@@ -459,6 +465,25 @@ export function Table<
       {paddingTopRow}
       {renderedRows}
       {paddingBottomRow}
+      {hasFooters &&
+        headerGroups.at(-1)?.headers.map((header, index) => (
+          <ColumnFooter
+            column={header}
+            key={header.id}
+            style={{
+              ...stickyLeftColumnStyle[header.id],
+            }}
+            lastLeftSticky={
+              header.columns
+                ? header.id === stickyLeftColumnGroupsIds.at(-1)
+                : index === lastStickyColumnIndex
+            }
+            stickyFooters={stickyFooters}
+            sticky={stickyLeftColumnsIds.includes(header.id)}
+            first={index === 0}
+            last={index + 1 === flatColumns.length}
+          />
+        ))}
     </Box>
   );
 }
@@ -593,6 +618,58 @@ function ColumnHeader<D extends Record<string, unknown>>({
   );
 }
 
+function ColumnFooter<D extends Record<string, unknown>>({
+  column,
+  style,
+  lastLeftSticky,
+  stickyFooters,
+  sticky,
+  first,
+  last,
+}: {
+  column: ColumnInstance<D> | HeaderGroup<D>;
+  style: CSSProperties;
+  lastLeftSticky: boolean;
+  stickyFooters: boolean;
+  sticky: boolean;
+  first: boolean;
+  last: boolean;
+}) {
+  const config = useBentoConfig().table;
+
+  return (
+    <Box
+      className={[lastLeftSticky && lastLeftStickyColumn, stickyFooters && stickyColumnFooter]}
+      style={{
+        ...style,
+        zIndex: sticky ? zIndexes.leftStickyHeader : zIndexes.header,
+      }}
+    >
+      <Box
+        className={columnFooter}
+        background={config.footerBackgroundColor}
+        color={config.footerForegroundColor}
+        {...column.getFooterProps()}
+        textAlign={column.align}
+        {...config.padding.footer}
+      >
+        {column.Footer && (
+          <Box
+            paddingLeft={first ? config.boundaryPadding : undefined}
+            paddingRight={last ? config.boundaryPadding : undefined}
+          >
+            <Columns space={8} alignY="center" align={column.align}>
+              <Column width="content">
+                <Label size="large">{column.render("Footer") as any}</Label>
+              </Column>
+            </Columns>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
 function SectionHeader({
   label,
   numberOfStickyColumns,

packages/bento-design-system/src/Table/tableColumn.tsx

@@ -39,6 +39,7 @@ export function custom<A extends string, V, D extends Record<string, unknown>>({
   sortType,
   missingValue,
   width,
+  footer,
   ...options
 }: ColumnOptionsBase<A> & {
   Cell: (props: CellProps<D, V>) => Children;
@@ -62,6 +63,7 @@ export function custom<A extends string, V, D extends Record<string, unknown>>({
       }
     },
     Header: headerLabel,
+    Footer: footer,
   } as Column<A, D, V>;
 
   if (sortType) {

packages/bento-design-system/src/Table/types.ts

@@ -15,6 +15,7 @@ declare module "react-table" {
     sticky?: "left";
     gridWidth?: GridWidth;
     hint?: LocalizedString | { onPress: () => void };
+    footer?: string | ((props: { rows: Row<D>[] }) => string);
   }
 
   interface ColumnInstance<D extends object>

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -506,12 +506,15 @@ export const table: TableConfig = {
   emptyIcon: IconSearch,
   headerBackgroundColor: "backgroundPrimary",
   headerForegroundColor: "foregroundPrimary",
+  footerBackgroundColor: "backgroundPrimary",
+  footerForegroundColor: "foregroundPrimary",
   hintPlacement: "top",
   cellTooltipPlacement: "bottom",
   evenRowsBackgroundColor: "backgroundSecondary",
   selectedRowBackgroundColor: "backgroundInteractiveOverlay",
   padding: {
     header: { paddingX: 16, paddingY: 8 },
+    footer: { paddingX: 16, paddingY: 8 },
     defaultCell: { paddingX: 16, paddingY: 16 },
     buttonCell: { paddingX: 8, paddingY: 8 },
     buttonLinkCell: { paddingX: 8, paddingY: 8 },