> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Customize a Column With Badges in Auto Patterns

## Article: Tutorial | Customize a Column With Badges in Auto Patterns

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/design/auto-patterns/tutorial-customize-a-column-with-badges-in-auto-patterns.md

## Article Content:

# Tutorial | Customize a Column with Badges in Auto Patterns
<blockquote class="caution">

__Alpha:__
The [AI app builder](https://dev.wix.com/docs/build-apps/develop-your-app/build-with-ai/about-the-ai-app-builder.md) is currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

</blockquote>


You can override default column rendering in [Auto Patterns](https://dev.wix.com/docs/build-apps/develop-your-app/design/auto-patterns/about-auto-patterns.md) to customize how columns appear in table components on dashboard pages. In this tutorial, you customize an order status column to display badges with different colors based on the order status value. The order status column displays a standard badge for `Processing`, a success badge for `Shipped` and `Delivered`, an error badge for `Canceled`, and a neutral badge for other values.

Use the following steps to customize the column with badges:

1. [Create the column component](#step-1--create-the-column-component).
2. [Export the column component](#step-2--export-the-column-component).
3. [Configure the column overrides](#step-3--configure-the-column-overrides).
4. [Update the configuration file](#step-4--update-the-configuration-file).

## Step 1 | Create the column component

Create a column component file such as `components/columns/orderStatus.tsx`. In this file, define a method that receives the column value and returns a React component that displays it as a badge.

The method uses conditional logic to determine the badge color based on the status value:

- `Processing`: standard badge
- `Shipped` or `Delivered`: success badge
- `Canceled`: error badge

```tsx
import { Badge } from '@wix/design-system';

interface IColumnValue<T> {
  value: T;
}

export function orderStatus({ value }: IColumnValue<string>) {
  if (!value) {
    return <span>-</span>;
  }

  const skin = value === 'Processing' ? 'standard' 
    : value === 'Shipped' || value === 'Delivered' ? 'success' 
    : value === 'Canceled' ? 'error' 
    : 'neutral';

  return (
    <Badge skin={skin} size="small">
      {value}
    </Badge>
  );
}
```

## Step 2 | Export the column component

Create an index file such as `components/columns/index.tsx` that exports your column components.

```tsx
import { orderStatus } from './orderStatus';

export const useColumns = () => {
  return {
    orderStatus,
  };
};
```

## Step 3 | Configure the column overrides

Import the column overrides in your page component and specify them as the value for `PatternsWizardOverridesProvider`. 

1. Add the import for `useColumns` from your columns directory.
2. Inside your component, call `useColumns()` to get the column overrides.
3. Wrap your `AutoPatternsApp` component with `PatternsWizardOverridesProvider` and pass the columns as the value prop.

```tsx
import { type FC } from 'react';
import { WixDesignSystemProvider } from '@wix/design-system';
import '@wix/design-system/styles.global.css';
import { WixPatternsProvider } from '@wix/patterns/provider';
import { PatternsWizardOverridesProvider, AutoPatternsApp } from '@wix/auto-patterns';
import type { AppConfig } from '@wix/auto-patterns';
import { withDashboard } from '@wix/patterns';
import config from './patterns.json';
import { useColumns } from './components/columns';

const CollectionPage: FC = () => {
  const columns = useColumns();

  return (
    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
      <WixPatternsProvider>
        <PatternsWizardOverridesProvider value={{ columns }}>
          <AutoPatternsApp configuration={config as AppConfig} />
        </PatternsWizardOverridesProvider>
      </WixPatternsProvider>
    </WixDesignSystemProvider>
  );
};

export default withDashboard(CollectionPage);
```

## Step 4 | Update the configuration file

In your `patterns.json` configuration file, reference the column override by its field ID. The field ID must match the name of the exported method in your column component. For example, if the field ID is `orderStatus` in the collection, Auto Patterns automatically uses the `orderStatus` method from your column overrides. When Auto Patterns renders the table, it uses your custom `orderStatus` component to display order status column values as badges.

```json
{
  "pages": [
    {
      "id": "my-collection-page",
      "type": "collectionPage",
      "collectionPage": {
        "components": [
          {
            "type": "collection",
            "layout": [
              {
                "type": "Table",
                "table": {
                  "columns": [
                    {
                      "id": "orderStatus",
                      "name": "Order Status"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}
```

## See also

- [About Auto Patterns Features](https://dev.wix.com/docs/build-apps/develop-your-app/design/auto-patterns/about-auto-patterns-features.md)