Add SimpleTable component - a clean table without gradients

app/page.tsx

@@ -66,6 +66,7 @@ import RowSpaceBetween from '@components/RowSpaceBetween';
 import Script from 'next/script';
 import Select from '@components/Select';
 import SidebarLayout from '@components/SidebarLayout';
+import SimpleTable from '@components/SimpleTable';
 import Table from '@components/Table';
 import TableRow from '@components/TableRow';
 import TableColumn from '@components/TableColumn';
@@ -77,6 +78,14 @@ import ModalDOMSnake from '@root/components/modals/ModalDOMSnake';
 
 export const dynamic = 'force-static';
 
+const SIMPLE_TABLE_DATA = [
+  ['Name', 'Role', 'Location'],
+  ['Jimmy Lee', 'Staff Janitor', 'San Francisco'],
+  ['Andrew Alimbuyuguen', 'Webmaster', 'San Francisco'],
+  ['Anastasiya Uraleva', 'Webmaster', 'San Francisco'],
+  ['Elijah Seed Arita', 'Webmaster', 'Los Angeles'],
+];
+
 // NOTE(jimmylee)
 // https://nextjs.org/docs/app/api-reference/functions/generate-metadata
 export async function generateMetadata({ params, searchParams }) {
@@ -1468,6 +1477,10 @@ int main() {
           <br />
         </Accordion>
 
+        <Accordion defaultValue={true} title="SIMPLETABLE">
+          <SimpleTable data={SIMPLE_TABLE_DATA} />
+        </Accordion>
+
         <Accordion defaultValue={true} title="TABLE">
           A simple, declarative table component designed to streamline the creation of tables in JSX. It provides greater control over the structure and layout while evoking the aesthetics of old terminal interfaces (like MS-DOS).
           <br />

components/SimpleTable.module.css

@@ -0,0 +1,68 @@
+.root {
+  position: relative;
+  width: 100%;
+  border-spacing: 0px;
+  max-width: 64ch;
+  border-collapse: collapse;
+}
+
+.head {
+}
+
+.body {
+}
+
+.headerRow {
+  border-bottom: 1px solid var(--theme-border);
+}
+
+.headerCell {
+  border: 0;
+  outline: 0;
+  padding: 4px 1ch 4px 0;
+  font-weight: 600;
+  text-align: left;
+  font-size: var(--font-size);
+
+  &:focus {
+    background: var(--theme-focused-foreground);
+    outline: 0;
+  }
+
+  &:first-child {
+    padding-left: 0px;
+  }
+}
+
+.row {
+  border-spacing: 0px;
+
+  &:hover {
+    background: var(--theme-background-secondary);
+  }
+
+  &:nth-child(even) {
+    background: var(--theme-background-secondary);
+
+    &:hover {
+      background: var(--theme-border);
+    }
+  }
+}
+
+.cell {
+  border: 0;
+  outline: 0;
+  padding: 4px 1ch 4px 0;
+  font-size: var(--font-size);
+  transition: background-color 0.2s ease;
+
+  &:focus {
+    background: var(--theme-focused-foreground);
+    outline: 0;
+  }
+
+  &:first-child {
+    padding-left: 0px;
+  }
+}

components/SimpleTable.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import styles from '@components/SimpleTable.module.css';
+
+import * as React from 'react';
+
+interface SimpleTableProps {
+  data: string[][];
+  headerless?: boolean;
+}
+
+const SimpleTable: React.FC<SimpleTableProps> = ({ data, headerless = false }) => {
+  const tableRef = React.useRef<HTMLTableElement>(null);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {
+    const activeElement = document.activeElement;
+    if (!activeElement) return;
+
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        event.preventDefault();
+        if (!(activeElement instanceof HTMLTableCellElement)) return;
+        const direction = event.key === 'ArrowUp' || event.key === 'ArrowLeft' ? 'previous' : 'next';
+        const allCells = Array.from(tableRef.current?.querySelectorAll<HTMLTableCellElement>('td, th') || []);
+        const currentIndex = allCells.indexOf(activeElement);
+        if (currentIndex === -1) return;
+        let nextIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
+        if (direction === 'previous') {
+          if (nextIndex < 0) nextIndex = allCells.length - 1;
+        } else {
+          if (nextIndex >= allCells.length) nextIndex = 0;
+        }
+        allCells[nextIndex].focus();
+        break;
+    }
+  };
+
+  return (
+    <table className={styles.root} ref={tableRef} onKeyDown={handleKeyDown}>
+      {!headerless && data.length > 0 && (
+        <thead className={styles.head}>
+          <tr className={styles.headerRow}>
+            {data[0].map((cellContent, colIndex) => (
+              <th key={colIndex} className={styles.headerCell} tabIndex={0}>
+                {cellContent}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      )}
+      <tbody className={styles.body}>
+        {data.slice(headerless ? 0 : 1).map((row, rowIndex) => (
+          <tr key={rowIndex} className={styles.row}>
+            {row.map((cellContent, colIndex) => (
+              <td key={colIndex} className={styles.cell} tabIndex={0}>
+                {cellContent}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+SimpleTable.displayName = 'SimpleTable';
+
+export default SimpleTable;