Added cardMode to GridTable.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-basics",
-  "version": "0.100.0",
+  "version": "0.101.0",
   "description": "Everyday components for React",
   "license": "MIT",
   "repository": {
@@ -53,10 +53,10 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@react-spring/web": "^9.7.3",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",
     "react-hook-form": "^7.34.2",
-    "react-spring": "^9.5.5",
     "react-window": "^1.8.6"
   },
   "devDependencies": {

rollup.config.js

@@ -11,6 +11,8 @@ import svgr from '@svgr/rollup';
 
 const md5 = str => crypto.createHash('md5').update(str).digest('hex');
 
+const external = ['react', 'react-dom', 'react/jsx-runtime', 'react-spring'];
+
 const customResolver = resolve({
   extensions: ['.js', '.jsx', '.ts', '.tsx'],
 });
@@ -58,7 +60,7 @@ const jsBundle = {
     commonjs(),
     esbuild(),
   ],
-  external: ['react', 'react-dom', 'react/jsx-runtime'],
+  external,
 };
 
 const dtsBundle = {
@@ -79,7 +81,7 @@ const dtsBundle = {
     commonjs(),
     dts(),
   ],
-  external: [/\.css/, 'react', 'react-dom', 'react/jsx-runtime'],
+  external: [/\.css/, ...external],
 };
 
 export default [jsBundle, dtsBundle];

src/components/status/ToastContainer.module.css

@@ -8,8 +8,8 @@
   left: 0;
   right: 0;
   margin: auto;
-  z-index: var(--z-index-popup);
   pointer-events: none;
+  z-index: var(--z-index-popup);
 }
 
 .top {

src/components/table/GridTable.module.css

@@ -52,3 +52,24 @@
 .end {
   justify-content: flex-end;
 }
+
+.cards {
+  padding: 20px 0;
+}
+
+.card {
+  display: grid;
+  align-items: center;
+  gap: 10px;
+  grid-template-columns: max-content 1fr;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--base400);
+}
+
+.card:last-child {
+  border-bottom: 0;
+}
+
+.label {
+  font-weight: 700;
+}

src/components/table/GridTable.tsx

@@ -1,23 +1,64 @@
 import classNames from 'classnames';
 import { CommonProps } from 'components/types';
 import { mapChildren } from 'components/utils';
+// eslint-disable-next-line css-modules/no-unused-class
 import styles from './GridTable.module.css';
 
 const defaultWidth = `minmax(120px, 1fr)`;
 
 export interface GridTableProps extends CommonProps {
   data: any[];
+  cardMode: boolean;
 }
 
 export function GridTable(props: GridTableProps) {
-  const { data, className, style, children, ...domProps } = props;
+  const { data, className, style, children, cardMode, ...domProps } = props;
 
   const gridTemplateColumns = mapChildren(children, ({ props }) => {
     return props.hidden ? '' : props.width ?? defaultWidth;
   })
     .join(' ')
     .trim();
 
+  if (cardMode) {
+    return (
+      <div className={classNames(styles.cards, className)}>
+        {data.map((row, index) => (
+          <div key={index} className={styles.card}>
+            {mapChildren(children, (child, index) => {
+              const {
+                name,
+                children,
+                className,
+                hidden,
+                label,
+                alignment = 'start',
+                ...domProps
+              } = child.props;
+
+              if (hidden) {
+                return null;
+              }
+
+              return (
+                <>
+                  <div className={styles.label}>{label}</div>
+                  <div
+                    {...domProps}
+                    key={name}
+                    className={classNames(styles.cell, className, styles[alignment])}
+                  >
+                    {typeof children === 'function' ? children(row, name, index) : row[name]}
+                  </div>
+                </>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <table
       {...domProps}