> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Table 07

> A structured data table with checkboxes, status, balance, email, and location columns.

<Frame>
  ![Table 07](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Tables/table-data-table-with-checkbox.png)
</Frame>

## Overview

Table 07 is a multi-column data table component designed for web applications. It features a header row with sortable-style columns (Name, Status, Balance, Email, Location) and a select-all checkbox mechanism. The table supports row-level item selection via checkboxes, tracking selected items through custom states on the table element. It is ideal for displaying lists of users or records with bulk selection functionality.

## How to use

<Steps>
  <Step titleSize="h4" title="Open the Brikl panel">
    Navigate to the **Elements** category in the Brikl panel.
  </Step>

  <Step titleSize="h4" title="Copy the component">
    Find **Table 07** and click **Copy**.
  </Step>

  <Step titleSize="h4" title="Paste into your editor">
    Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows),
    or right-click on the canvas and select **Paste**.
  </Step>
</Steps>

## States

This component includes conditional states that automatically change its appearance.

| State                  | Trigger                                                                                 | Visual effect                                                                                      |
| ---------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| No items selected      | No items exist in the custom state list (count equals 0)                                | The select-all checkbox icon shows a white background with no check mark (empty square appearance) |
| All items selected     | The count of selected items equals the total count of available list data               | The select-all checkbox icon shows a filled dark background with a check mark (feather check icon) |
| Partial items selected | Some but not all items are selected (count not equal to total and count not equal to 0) | The select-all checkbox icon shows a minus icon with a gray color indicating partial selection     |

<Note>
  These states are handled natively by Bubble and require no additional setup.
  They will work automatically once the component is pasted into your editor.
</Note>

## Responsive

This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint.

## Workflows

This component includes pre-built workflows.

| Trigger                                                                                    | Action                                                                                                                    |
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
| Icon - Checkbox Select All is clicked (no condition)                                       | Sets the table's custom state 'custom.items\_' to the full list data from the ancestor Table element, selecting all items |
| Icon - Checkbox Select All is clicked (when all items are already selected)                | Clears the table's custom state 'custom.items\_', deselecting all items                                                   |
| Icon - Checkbox Select Item is clicked (when current row item is not in selected list)     | Adds the current row's TableCrossAxis data item to the table's 'custom.items\_' custom state list                         |
| Icon - Checkbox Select Item is clicked (when current row item is already in selected list) | Removes the current row's TableCrossAxis data item from the table's 'custom.items\_' custom state list                    |

<Note>
  These workflows are included when you use the **Copy with Workflows** option in the Brikl panel.
</Note>

## Requirements

|             |                       |
| ----------- | --------------------- |
| License     | Starter plan required |
| Plugins     | None                  |
| Custom code | Not required          |

## Platforms

| Platform | Supported |
| -------- | --------- |
| Web      | ✅         |
| Mobile   | ❌         |

## License

<Note>
  This component requires a **Starter** plan.
</Note>