Tutorial | Customize a Column with Badges in Auto Patterns

You can override default column rendering in Auto Patterns 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.
2. Export the column component.
3. Configure the column overrides.
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

Step 2 | Export the column component

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

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.

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.

See also

• About Auto Patterns Features