## Import
```jsx
import { Table } from "@cfa/react-core";
```
## Live Editor
```jsx
ItemCategoryQuantityChick-fil-A® Chicken SandwichEntrées24Waffle Potato FriesSides48Chick-fil-A® LemonadeBeverages36
```
## Guidelines
### When to use
- Table is for data with comparable columns, such as when people compare, sort, filter, or bulk-edit.
### Do
- On narrow viewports, keep tabular data in a Table. Prefer horizontal scroll over turning rows into Cards.
- Scroll wide tables horizontally in a contained area. Keep column headers and the row identifier visible where the component supports it.
- When the table is selectable, always include a selection column (`SelectionColumn` in the header and `SelectionCell` in each row), typically first. Do not rely on selected row color alone.
- For multi-select, include select-all in the header. For single-select, still include a per-row control. Do not include select-all.
- Name each row's selection checkbox from that row, such as the row header, not a generic Select.
- For container empty, loading, error, and filtered-empty states, see Empty State.
### Avoid
- Using Table when selection is a single attribute without columns. Use ListBox.
## Examples
### Dynamic Collections
Use the `items` prop to pass an array of objects to `Table.Body` with a render function. This works like `.map()` but is more performant because it only re-renders rows that have changed, rather than the entire list.
```jsx
function DynamicCollectionExample() {
const items = [
{ id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
{ id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
{ id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
];
return (
NameFlavorQuantity
{(item) => (
{item.name}{item.flavor}{item.quantity}
)}
);
}
```
### Striped Variant
Use the `variant="striped"` prop to alternate row background colors for better readability.
```jsx
function StripedExample() {
const items = [
{ id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
{ id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
{ id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
{ id: 4, name: "Garden Herb Ranch Sauce", flavor: "Creamy", quantity: 70 },
];
return (
NameFlavorQuantity
{(item) => (
{item.name}{item.flavor}{item.quantity}
)}
);
}
```
### Compact
Use the `compact` prop to reduce row height and cell padding.
```jsx
function CompactExample() {
const items = [
{ id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
{ id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
{ id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
{ id: 4, name: "Garden Herb Ranch Sauce", flavor: "Creamy", quantity: 70 },
];
return (
NameFlavorQuantity
{(item) => (
{item.name}{item.flavor}{item.quantity}
)}
);
}
```
### Text Alignment
Use the `alignment` prop on `Table.Cell` or `Table.Column` to align cell content. Supported values are `"start"` (default), `"center"`, and `"end"`.
```jsx
function TextAlignmentExample() {
const items = [
{ id: 1, name: "Chick-fil-A® Sauce", price: 0.25, quantity: 120 },
{ id: 2, name: "Polynesian Sauce", price: 0.25, quantity: 85 },
{ id: 3, name: "Honey Mustard Sauce", price: 0.25, quantity: 95 },
{ id: 4, name: "Garden Herb Ranch Sauce", price: 0.5, quantity: 70 },
];
return (
NamePriceQuantity
{(item) => (
{item.name}${item.price.toFixed(2)}{item.quantity}
)}
);
}
```
### Row Links
Use the `href` prop on `Table.Row` to make entire rows navigable. This is useful for tables where each row represents a resource the user can navigate to.
```jsx
function RowLinksExample() {
const resources = [
{
id: 1,
name: "Menu",
url: "https://www.chick-fil-a.com/menu",
category: "Food & Beverages",
},
{
id: 2,
name: "Locations",
url: "https://www.chick-fil-a.com/locations",
category: "Restaurant Finder",
},
{
id: 3,
name: "Chick-fil-A One",
url: "https://www.chick-fil-a.com/one",
category: "Rewards Program",
},
];
return (
NameURLCategory
{(resource) => (
{resource.name}{resource.url}{resource.category}
)}
);
}
```
### Single Selection
Enable single row selection by setting `selectionMode="single"`.
```jsx
function SingleSelectionExample() {
const [selectedKeys, setSelectedKeys] = React.useState(new Set());
const items = [
{ id: 1, name: "Chick-fil-A® Sauce", flavor: "Savory", quantity: 120 },
{ id: 2, name: "Polynesian Sauce", flavor: "Sweet", quantity: 85 },
{ id: 3, name: "Honey Mustard Sauce", flavor: "Tangy", quantity: 95 },
];
return (
<>
NameFlavorQuantity
{(item) => (
{item.name}{item.flavor}{item.quantity}
)}