Payments table
Filter transactions and select payments for a consumer-owned bulk export.
Freya Lindgrenfreya@driftlab.se | succeeded | $2,400 | |
Mateo Alvarezmateo@keelworks.mx | processing | $640 | |
Aiko Watanabeaiko@lumenshift.jp | succeeded | $180 | |
Jonas Kellerjonas@fernwerk.de | failed | $1,280 | |
Zara Oseizara@copperline.gh | succeeded | $960 | |
Nils Bakkernils@havenpoint.nl | refunded | $180 | |
| Total | $11,160 |
8 rows
Illustrative sample data. Sort a column, filter records, or use the table’s keyboard controls.
Implementation
1"use client";2 3import * as React from "react";4import { AnimatePresence, LayoutGroup, motion, useMotionValueEvent, useReducedMotion, useSpring } from "motion/react";5import { clsx, type ClassValue } from "clsx";6import { twMerge } from "tailwind-merge";7 8/**9 * Adapted from Spectrum UI by Arihant Jain (Apache-2.0).10 * Upstream revision: acdc998c64829f8ae037be48e3c273ccc8d71f60.11 * Modified for Gamma tokens, supplied data, portable exports, and accessible feedback.12 * License and attribution: docs/spectrum/LICENSE and docs/spectrum/NOTICE.13 */14function cn(...values: ClassValue[]) {15 return twMerge(clsx(values));16}17 18/* ---------------------------------------------------------------------------19 * Iconly on a 24px grid, recolored with `currentColor`. Outline (Light) is the20 * idle mark — search, clear — and fill (Bold) is reserved for a state that is21 * already on: a copied tick, a document in the empty body.22 * ------------------------------------------------------------------------- */23 24type IconProps = React.SVGProps<SVGSVGElement>;25 26function Glyph({ children, ...props }: IconProps) {27 return (28 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>