feat: reusable and accessible table component

packages/website/components/table/pagination.js

@@ -0,0 +1,87 @@
+import clsx from 'clsx';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+/**
+ * @typedef {Object} PaginationProps
+ * @prop {string} [className]
+ * @prop {number} totalRowCount
+ * @prop {number} itemsPerPage
+ * @prop {number} [visiblePages]
+ * @prop {number} page
+ * @prop {function} [onPageChange]
+ * @prop {string} [scrollTarget]
+ */
+export default function Pagination({
+  className,
+  totalRowCount,
+  itemsPerPage,
+  visiblePages,
+  page,
+  onPageChange,
+  scrollTarget,
+}) {
+  const [pageList, setPageList] = useState(/** @type {number[]} */ ([]));
+
+  const pageCount = useMemo(() => Math.ceil(totalRowCount / itemsPerPage), [totalRowCount, itemsPerPage]);
+
+  const pageChangeHandler = useCallback(
+    page => {
+      if (!!scrollTarget) {
+        const scrollToElement = document.querySelector(scrollTarget);
+        scrollToElement?.scrollIntoView(true);
+      }
+      onPageChange && onPageChange(page);
+    },
+    [scrollTarget, onPageChange]
+  );
+  useEffect(() => {
+    setPageList(
+      Array.from({ length: pageCount }, (_, i) => i).filter(p => p >= page - visiblePages && p <= page + visiblePages)
+    );
+  }, [visiblePages, page, pageCount]);
+
+  return (
+    <div className={clsx(className, 'Pagination')}>
+      <ul className="pageList">
+        {page > visiblePages + 1 && (
+          <button type="button" className="firstPage" onClick={() => pageChangeHandler(0)}>
+            First
+          </button>
+        )}
+        {page > 1 && (
+          <button type="button" className="prevPage" onClick={() => pageChangeHandler(page - 1)}>
+            Prev
+          </button>
+        )}
+        {page > visiblePages + 1 && <div className="prevEllipses">...</div>}
+        {pageCount !== 1 &&
+          pageList &&
+          pageList.map(p => (
+            <button
+              type="button"
+              key={`page-${p}`}
+              className={clsx('page', { current: p === page })}
+              onClick={() => pageChangeHandler(p)}
+            >
+              {p + 1}
+            </button>
+          ))}
+        {pageCount != null && page < pageCount - visiblePages && <div className="nextEllipses">...</div>}
+        {pageCount != null && page < pageCount && (
+          <button type="button" className="nextPage" onClick={() => pageChangeHandler(page + 1)}>
+            Next
+          </button>
+        )}
+        {pageCount != null && page < pageCount - visiblePages && (
+          <button type="button" className="lastPage" onClick={() => pageChangeHandler(pageCount)}>
+            Last
+          </button>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+Pagination.defaultProps = {
+  visiblePages: 1,
+};

packages/website/components/table/pagination.scss

@@ -0,0 +1,36 @@
+.Pagination {
+  padding-bottom: 1rem;
+
+  .pageList {
+    list-style: none;
+    display: flex;
+    gap: 1rem;
+
+    .page {
+      &.current {
+        cursor: default;
+        font-weight: 600;
+        color: #ff0000;
+      }
+
+      &:hover {
+        opacity: 0.75;
+     }
+    }
+
+    .page,
+    .firstPage,
+    .prevPage,
+    .nextPage,
+    .lastPage {
+      cursor: pointer;
+      background: none;
+      border: none;
+    }
+
+    .prevEllipses,
+    .nextEllipses {
+      cursor: default;
+    }
+  }
+}

packages/website/components/table/selectCell.js

@@ -0,0 +1,20 @@
+import CheckIcon from 'assets/icons/check';
+
+/**
+ * @type {import('react').FC}
+ *
+ * Used to render a checkbox cell within a table component.
+ *
+ * @param {Object} props
+ * @returns
+ */
+function SelectCell({ selected = false, id, onSelectChange }) {
+  return (
+    <span className="file-select">
+      <input checked={selected} type="checkbox" id={id} onChange={e => onSelectChange(e.target.checked)} />
+      <CheckIcon className="check" />
+    </span>
+  );
+}
+
+export default SelectCell;

packages/website/components/table/table.js

@@ -0,0 +1,210 @@
+import React, { useCallback } from 'react';
+
+import Loading from 'components/loading/loading';
+import Dropdown from 'ZeroComponents/dropdown/dropdown';
+import Pagination from 'components/table/pagination';
+import SelectCell from 'components/table/selectCell';
+
+/**
+ * @typedef {Object} ColumnDefinition
+ * @property {string | import('react').ReactComponentElement } headerContent
+ * @property {string} id
+ * @property {import('react').FC} [cellRenderer]
+ * @property {function} [getCellProps]
+ *
+ */
+
+/**
+ * @type {import('react').FC}
+ *
+ * @param {Object} props
+ * @param {ColumnDefinition[]} props.columns
+ * @param {Array<object>} props.rows
+ * @param {number} [props.totalRowCount]
+ * @param {number} [props.page]
+ * @param {number} [props.rowsPerPage]
+ * @param {number[]} [props.rowsPerPageOptions]
+ * @param {boolean} [props.isEmpty]
+ * @param {boolean} [props.isLoading]
+ * @param {string} [props.scrollTarget]
+ * @param {boolean} [props.withRowSelection]
+ * @param {import('react').ReactComponentElement}  [props.emptyState]
+ * @param {import('react').ReactComponentElement}  [props.leftFooterSlot]
+ * @param {number[]} [props.selectedRows] List of keys of the selected rows
+ * @param {function} [props.onPageSelect]
+ * @param {function} [props.onSetItemsPerPage]
+ * @param {(key: number|string, value: boolean) => void} [props.onRowSelectedChange]
+ * @param {(value: boolean) => void} [props.onSelectAll]
+ */
+
+function Table({
+  columns,
+  rows,
+  totalRowCount,
+  page = 0,
+  rowsPerPage,
+  rowsPerPageOptions,
+  isEmpty = false,
+  emptyState,
+  isLoading = false,
+  withRowSelection = false,
+  leftFooterSlot,
+  selectedRows,
+  onRowSelectedChange,
+  onSelectAll,
+  onPageSelect,
+  onSetItemsPerPage,
+  scrollTarget = '.storage-table',
+}) {
+  /**
+   * @type { ColumnDefinition[]}
+   */
+  let effectiveColumns = [...columns];
+
+  const selectAllRowsHandler = useCallback(
+    value => {
+      onSelectAll && onSelectAll(value);
+    },
+    [onSelectAll]
+  );
+
+  const selectRowHandler = useCallback(
+    (rowKey, value) => {
+      onRowSelectedChange && onRowSelectedChange(rowKey, value);
+    },
+    [onRowSelectedChange]
+  );
+
+  const pageSelectHandler = useCallback(
+    page => {
+      onPageSelect && onPageSelect(page);
+    },
+    [onPageSelect]
+  );
+
+  const keysAllEqual = function areEqual(array1, array2) {
+    if (array1.length === array2.length) {
+      return array1.every(element => {
+        if (array2.includes(element)) {
+          return true;
+        }
+
+        return false;
+      });
+    }
+
+    return false;
+  };
+
+  // If row selection is enabled add a column with checkboxes at the start.
+  if (withRowSelection) {
+    /**
+     * @type { ColumnDefinition}
+     */
+    const selectionColumn = {
+      id: 'rowSelection',
+      headerContent: (
+        // Select all checkbox in the header.
+        <SelectCell
+          selected={
+            rows.length !== 0 &&
+            keysAllEqual(
+              selectedRows,
+              rows.map(r => r.key)
+            )
+          }
+          id={`table-storage-select-all`}
+          onSelectChange={selected => selectAllRowsHandler(selected)}
+        />
+      ),
+      cellRenderer: SelectCell,
+      getCellProps: (cell, index) => {
+        return {
+          selected: selectedRows?.includes(index),
+          onSelectChange: selected => selectRowHandler(index, selected),
+          id: `table-storage-row-${index}-select`,
+        };
+      },
+    };
+
+    effectiveColumns = [selectionColumn, ...effectiveColumns];
+  }
+
+  const renderRowComponent = (row, index, selected) => {
+    const rowKey = row.key || index;
+    return (
+      <div role="rowgroup" key={rowKey}>
+        <div
+          className="storage-table-row"
+          role="row"
+          aria-rowindex={index}
+          aria-selected={selectedRows?.includes(index) || false}
+        >
+          {effectiveColumns.map(c => (
+            <span key={`${c.id}-${rowKey}`} role="cell">
+              {c.cellRenderer ? (
+                <c.cellRenderer {...(c.getCellProps ? c.getCellProps(row[c.id], rowKey) : {})}></c.cellRenderer>
+              ) : (
+                row[c.id]
+              )}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  if (isEmpty && !isLoading && emptyState) {
+    return (
+      <div className="storage-table">
+        <div className="storage-table-table-content">{emptyState}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="storage-table" role="table">
+      <div role="rowgroup">
+        <div className="storage-table-row storage-table-header" role="row">
+          {effectiveColumns.map(c => (
+            <div key={c.id} role="columnheader">
+              {c.headerContent}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="storage-table-content">
+        {isLoading ? <Loading className={'files-loading-spinner'} /> : rows.map((row, i) => renderRowComponent(row, i))}
+
+        {!isEmpty && (
+          <div className="storage-table-footer">
+            <div>{!!leftFooterSlot && leftFooterSlot}</div>
+
+            <Pagination
+              className="storage-table-pagination"
+              page={page}
+              totalRowCount={totalRowCount || rows.length}
+              itemsPerPage={rowsPerPage}
+              visiblePages={1}
+              onPageChange={pageSelectHandler}
+              scrollTarget={scrollTarget}
+            />
+            {rowsPerPageOptions && rowsPerPageOptions.length !== 0 && (
+              <Dropdown
+                className="storage-table-result-dropdown"
+                value={rowsPerPage}
+                options={rowsPerPageOptions.map(ipp => ({
+                  label: `View ${ipp} results`,
+                  value: ipp.toString(),
+                }))}
+                onChange={value => onSetItemsPerPage && onSetItemsPerPage(parseInt(value))}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Table;