# Data Table Cart block

> Data Table Shopping Cart with Column Header Rail, Quantity Steppers, and Order Summary

Full-width pre-checkout cart as a data table: column header rail, thumbnail rows with linked title, color swatch and size, ButtonGroup steppers, line totals, and an order summary with free-shipping Badge. ReUI Badge, shadcn Button, Item, Tooltip.

- Type: Pro block
- Category: [Shopping Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-3
- MCP: `get_block("shopping-cart-3")`
- Built with: Badge, Button, Button Group, Empty, Item, Separator, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Separate unit Price and Total Price columns under a header row, with the totals block right aligned below the table

## Agent notes

- Proceed To Checkout is a link rendered through the Button `render` prop with a fixed `href`; point it at your checkout route and keep its `aria-label` total
- `taxHint` in `OrderSummary` spells out 8 percent as text, so edit it together with `TAX_RATE`
- Swatch dots come from `swatchClassName` on each item `color`, a Tailwind class string, so map your color options to classes

## When not to use

- A sticky side summary with a coupon field beside the item list: use [Delivery Summary Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-2.md) (`get_block("shopping-cart-2")`)
- Editable invoice rows with typed prices, a discount and a live tax total: use [Invoice Creator](https://web.dev.reui.io/blocks/application/form/form-3.md) (`get_block("form-3")`)

## Install

```bash
npx shadcn@latest add @reui/shopping-cart-3
```

## About Shopping Cart blocks

### When to use

- A cart page where shoppers change quantities, remove lines and see the totals before paying
- A mini cart that drops from a header Cart button or slides in from the side after an add

### When not to use

- Rows of funds, coins, transactions or integrations, with no quantities or order total: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- A side panel over an app page for a record, a form or an assistant, with no prices: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)
- Taking contact, shipping address and card details to place and pay for the order: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- Lines live in local `useState` seeded from `CART_ITEMS` or `CART_LINES` in data.tsx; read them from your cart store and write each quantity change back
- The empty state's Restore Sample Cart button reloads the demo lines through `handleRestoreCart` or `handleRestore`; point it at your catalog
- Each priced file declares its own `formatCurrency` fixed to en-US and USD; change every copy to show another currency or locale

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.