TableWrapper

Wrapper for displaying a html table

TableWrapper is a wrapper for an HTML table that allows flexible control over its appearance.

You are free to style the table as you wish.

#	Company	Deal Stage	Amount
1	Tech Innovators Inc.	Proposal Sent	50,000
2	Global Solutions Ltd.	Negotiation	120,000
3	Future Enterprises	Contract Signed	200,000
4	Bright Ideas Co.	Initial Contact	15,000
5	NextGen Technologies	Closing	300,000
Total:			685,00

{
  "wait": "Loading client-side content..."
}

Size

By using the size property, you can adjust the size of the table.

#	Company	Deal Stage	Amount
1	Tech Innovators Inc.	Proposal Sent	50,000
2	Global Solutions Ltd.	Negotiation	120,000
3	Future Enterprises	Contract Signed	200,000
4	Bright Ideas Co.	Initial Contact	15,000
5	NextGen Technologies	Closing	300,000
Total:			685,00

{
  "wait": "Loading client-side content..."
}

Border and background

To display the table border, use the bordered property.

The background is set separately using the class. For example, for a white background: class="bg-white".

Or you can use the Card component to set the background.

#	Company	Deal Stage	Amount
1	Tech Innovators Inc.	Proposal Sent	50,000
2	Global Solutions Ltd.	Negotiation	120,000
3	Future Enterprises	Contract Signed	200,000
4	Bright Ideas Co.	Initial Contact	15,000
5	NextGen Technologies	Closing	300,000
Total:			685,00

{
  "wait": "Loading client-side content..."
}

Rounded

To round the corners, use the rounded parameter.

#	Company	Deal Stage	Amount
1	Tech Innovators Inc.	Proposal Sent	50,000
2	Global Solutions Ltd.	Negotiation	120,000
3	Future Enterprises	Contract Signed	200,000
4	Bright Ideas Co.	Initial Contact	15,000
5	NextGen Technologies	Closing	300,000
Total:			685,00

{
  "wait": "Loading client-side content..."
}

Zebra

If you need alternating rows, use the zebra property.

To highlight table rows, use the class of the tr tag.

To highlight a row when hovering the cursor, use something like hover:bg-red-500 in the tr tag class.

#	Company	Deal Stage	Amount
1	Tech Innovators Inc.	Proposal Sent	50,000
2	Global Solutions Ltd.	Negotiation	120,000
3	Future Enterprises	Contract Signed	200,000
4	Bright Ideas Co.	Initial Contact	15,000
5	NextGen Technologies	Closing	300,000
Total:			685,00

{
  "wait": "Loading client-side content..."
}

Row hover

For automatic row highlighting on hover, use the rowHover property.

#	Company	Deal Stage	Amount
1	Tech Innovators Inc.	Proposal Sent	50,000
2	Global Solutions Ltd.	Negotiation	120,000
3	Future Enterprises	Contract Signed	200,000
4	Bright Ideas Co.	Initial Contact	15,000
5	NextGen Technologies	Closing	300,000
Total:			685,00

{
  "wait": "Loading client-side content..."
}

Pinned rows

Rows can be pinned using the pinRows property.

Define the pinned-row using <thead>...</thead> or <tfoot>...</tfoot>.

A
AlphaTech Solutions
Apex Innovations
AstroCore Systems
Atomix Enterprises
Aurora Dynamics
B
BlueWave Technologies
BrightPath Solutions
BoldFuture Inc.
BioNova Industries
BeaconWorks
C
CyberForge Ltd.
CloudHaven Systems
CrimsonLogic
Catalyst Innovations
D
DeltaCore Technologies
Dynamo Solutions
DataSphere Inc.
DreamForge Industries
E
Eclipse Systems
F
FusionWorks
G
GreenPulse Technologies
GlobeForge Solutions
GoldenAxis Inc.
GalacticCore
H
Hyperion Dynamics
HaloTech Industries
HorizonWorks
I
InfinityForge
Ironclad Solutions
M
MetaCore Systems
R
Radiant Innovations
RocketForge Ltd.
S
Skyline Technologies
SolarFlare Systems
StellarCore Inc.
SynapseWorks
Summit Dynamics
T
TechNova Solutions
TitanForge Industries
W
WaveFront Technologies
WhiteHaven Systems
WiseCore Inc.
WorldForge Solutions
X
Xenon Innovations
Z
ZenithCore Systems
ZephyrWorks

{
  "wait": "Loading client-side content..."
}

Pinned columns

To pin columns, use the pinCols property.

Define the columns using <th>...</th>.

	Deal Name	Company	Deal Stage	Amount	Assigned To	Start Date	Notes
1	Tech Upgrade Project	Tech Innovators Inc.	Proposal Sent	150,000	John Doe	01/15/2023	Waiting for feedback	1
2	Global Expansion Plan	Global Solutions Ltd.	Negotiation	500,000	Jane Smith	02/10/2023	Key decision maker	2
3	New Product Launch	Future Enterprises	Contract Signed	300,000	Michael Brown	03/05/2023	Delivery in progress	3
4	Marketing Campaign	Bright Ideas Co.	Initial Contact	75,000	Emily Davis	04/20/2023	Budget approved	4
5	IT Infrastructure Deal	NextGen Technologies	Closing	1,000,000	David Wilson	05/12/2023	Finalizing details	5
6	HR Software Implementation	People First Inc.	Proposal Sent	200,000	Sophi Biles	06/01/2023	Awaiting approval	6
7	Logistics Optimization	Logistics Pro	Negotiation	450,000	Reid Semiras	07/18/2023	Discussing terms	7
8	Sales Training Program	Global Sales Ltd.	Contract Signed	120,000	Alec Lethby	08/22/2023	Training scheduled	8
9	Product Redesign	Innovate Corp.	Initial Contact	90,000	Florida Garces	09/05/2023	Initial discussions	9
10	Cloud Migration	Tech Solutions Inc.	Closing	600,000	Maribeth Popping	10/10/2023	Final review	10
11	Customer Support Upgrade	Zemlak, Daniel and Leannon	Proposal Sent	85,000	Hart Hagerty	11/15/2023	Pending approval	11
12	Financial Audit	Carroll Group	Negotiation	250,000	Brice Swyre	12/01/2023	Scope finalized	12
13	Office Renovation	Rowe-Schoen	Contract Signed	180,000	Marjy Ferencz	01/10/2024	Work in progress	13
14	Cybersecurity Upgrade	Wyman-Ledner	Initial Contact	300,000	Yancy Tear	02/05/2024	Initial assessment	14
15	Employee Wellness Program	Schuster-Schimmel	Closing	95,000	Meghann Durtnal	03/12/2024	Finalizing details	15
16	Data Analytics Project	Wiza, Bins and Emard	Proposal Sent	220,000	Irma Vasilik	04/18/2024	Awaiting feedback	16
17	E-commerce Platform	O'Hara, Welch and Keebler	Negotiation	700,000	Sammy Seston	05/22/2024	Key terms discussed	17
18	AI Integration	Turner-Kuhlman	Contract Signed	1,200,000	Lesya Tinham	06/30/2024	Implementation started	18
19	Supply Chain Optimization	Kshlerin, Rogahn and Swaniawski	Initial Contact	400,000	Aland Wilber	07/15/2024	Initial discussions	19
20	Product Launch Event	Sauer LLC	Closing	150,000	Zaneta Tewkesbury	08/20/2024	Final preparations	20
21	Mobile App Development	Hilpert Group	Proposal Sent	350,000	Andy Tipple	09/25/2024	Awaiting approval	21
22	Customer Loyalty Program	Gutmann Inc	Negotiation	120,000	Sophi Biles	10/10/2024	Terms under review	22
23	ERP System Implementation	Gaylord, Pacocha and Baumbach	Contract Signed	900,000	Florida Garces	11/15/2024	Project kickoff	23
24	Digital Marketing Campaign	Deckow-Pouros	Initial Contact	200,000	Maribeth Popping	12/20/2024	Initial discussions	24
25	Warehouse Automation	Schiller, Cole and Hackett	Closing	1,500,000	Moritz Dryburgh	01/05/2025	Finalizing details	25
	Deal Name	Company	Deal Stage	Amount	Assigned To	Start Date	Notes

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg"`
`rounded`	`false`	`boolean`
`zebra`	`false`	`boolean`
`pinRows`	`false`	`boolean`
`pinCols`	`false`	`boolean`
`rowHover`	`false`	`boolean`
`bordered`	`false`	`boolean`
`scrollbarThin`	`true`	`boolean`
`b24ui`		`{ base?: ClassNameValue; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    tableWrapper: {
      slots: {
        base: 'font-[family-name:var(--ui-font-family-primary)] [&>table]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table]:relative [&>table]:w-full [&>table]:text-left [&>table]:rtl:text-right [&>table]:text-(--b24ui-typography-label-color) [&>table>thead>tr>td]:align-middle [&>table>thead>tr>th]:align-middle [&>table>tbody>tr>td]:align-middle [&>table>tbody>tr>th]:align-middle [&>table>tfoot>tr>td]:align-middle [&>table>tfoot>tr>th]:align-middle [&>table>thead>tr>td]:whitespace-nowrap [&>table>thead>tr>td]:text-(length:--ui-font-size-md) [&>table>thead>tr>td]:font-(--ui-font-weight-normal) [&>table>thead>tr>th]:whitespace-nowrap [&>table>thead>tr>th]:text-(length:--ui-font-size-md) [&>table>thead>tr>th]:font-(--ui-font-weight-normal) [&>table>tbody>tr>th]:whitespace-nowrap [&>table>tbody>tr>th]:text-(length:--ui-font-size-md) [&>table>tbody>tr>th]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>td]:whitespace-nowrap [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>td]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>th]:whitespace-nowrap [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>th]:font-(--ui-font-weight-normal) [&>table>thead>tr]:border-(--ui-color-design-tinted-na-stroke) [&>table>tbody>tr]:border-(--ui-color-design-tinted-na-stroke) [&>table>tfoot]:border-(--ui-color-design-tinted-na-stroke) [&>table>thead>tr]:border-b [&>table>tbody>tr:not(:last-child)]:border-b [&>table>tfoot]:border-t'
      },
      variants: {
        size: {
          xs: '[&>table>thead>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>td]:px-2 [&>table>thead>tr>td]:py-1 [&>table>thead>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>th]:px-2 [&>table>thead>tr>th]:py-1 [&>table>tbody>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>td]:px-2 [&>table>tbody>tr>td]:py-1 [&>table>tbody>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>th]:px-2 [&>table>tbody>tr>th]:py-1 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>td]:px-2 [&>table>tfoot>tr>td]:py-1 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>th]:px-2 [&>table>tfoot>tr>th]:py-1',
          sm: '[&>table>thead>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>td]:px-3 [&>table>thead>tr>td]:py-2 [&>table>thead>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>th]:px-3 [&>table>thead>tr>th]:py-2 [&>table>tbody>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>td]:px-3 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>th]:px-3 [&>table>tbody>tr>th]:py-2 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>td]:px-3 [&>table>tfoot>tr>td]:py-2 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>th]:px-3 [&>table>tfoot>tr>th]:py-2',
          md: '[&>table>thead>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>td]:px-4 [&>table>thead>tr>td]:py-3.5 [&>table>thead>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-3.5 [&>table>tbody>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-3.5 [&>table>tbody>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>th]:px-4 [&>table>tbody>tr>th]:py-3.5 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>td]:px-4 [&>table>tfoot>tr>td]:py-3.5 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>th]:px-4 [&>table>tfoot>tr>th]:py-3.5',
          lg: '[&>table>thead>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>td]:px-5 [&>table>thead>tr>td]:py-4 [&>table>thead>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>th]:px-5 [&>table>thead>tr>th]:py-4 [&>table>tbody>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>td]:px-5 [&>table>tbody>tr>td]:py-4 [&>table>tbody>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>th]:px-5 [&>table>tbody>tr>th]:py-4 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>td]:px-5 [&>table>tfoot>tr>td]:py-4 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>th]:px-5 [&>table>tfoot>tr>th]:py-4'
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-md)',
          false: ''
        },
        zebra: {
          true: '[&>table>tbody>tr]:even:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:even:[&>td]:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:even:[&>th]:bg-(--ui-color-bg-content-secondary) light:[&>table>tbody>tr]:even:bg-[#f6f8f9] light:[&>table>tbody>tr]:even:[&>td]:bg-[#f6f8f9] light:[&>table>tbody>tr]:even:[&>th]:bg-[#f6f8f9]'
        },
        pinRows: {
          true: '[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0      [&>table>thead>tr]:z-1 [&>table>thead>tr]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur [&>table>thead>tr]:shadow-bottom-sm [&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0   [&>table>tfoot>tr]:z-1 [&>table>tfoot>tr]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur [&>table>tfoot>tr]:shadow-top-sm'
        },
        pinCols: {
          true: '[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 [&>table>thead>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur [&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 [&>table>tbody>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tbody>tr>th]:backdrop-blur [&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 [&>table>tfoot>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur'
        },
        rowHover: {
          true: '[&>table>tbody>tr]:hover:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:hover:[&>td]:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:hover:[&>th]:bg-(--ui-color-bg-content-secondary) light:[&>table>tbody>tr]:hover:bg-[#f6f8f9] light:[&>table>tbody>tr]:hover:[&>td]:bg-[#f6f8f9] light:[&>table>tbody>tr]:hover:[&>th]:bg-[#f6f8f9]'
        },
        bordered: {
          true: 'border border-(--ui-color-design-tinted-na-stroke)'
        },
        scrollbarThin: {
          true: 'scrollbar-thin'
        }
      },
      defaultVariants: {
        size: 'md',
        scrollbarThin: true
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        tableWrapper: {
          slots: {
            base: 'font-[family-name:var(--ui-font-family-primary)] [&>table]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table]:relative [&>table]:w-full [&>table]:text-left [&>table]:rtl:text-right [&>table]:text-(--b24ui-typography-label-color) [&>table>thead>tr>td]:align-middle [&>table>thead>tr>th]:align-middle [&>table>tbody>tr>td]:align-middle [&>table>tbody>tr>th]:align-middle [&>table>tfoot>tr>td]:align-middle [&>table>tfoot>tr>th]:align-middle [&>table>thead>tr>td]:whitespace-nowrap [&>table>thead>tr>td]:text-(length:--ui-font-size-md) [&>table>thead>tr>td]:font-(--ui-font-weight-normal) [&>table>thead>tr>th]:whitespace-nowrap [&>table>thead>tr>th]:text-(length:--ui-font-size-md) [&>table>thead>tr>th]:font-(--ui-font-weight-normal) [&>table>tbody>tr>th]:whitespace-nowrap [&>table>tbody>tr>th]:text-(length:--ui-font-size-md) [&>table>tbody>tr>th]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>td]:whitespace-nowrap [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>td]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>th]:whitespace-nowrap [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>th]:font-(--ui-font-weight-normal) [&>table>thead>tr]:border-(--ui-color-design-tinted-na-stroke) [&>table>tbody>tr]:border-(--ui-color-design-tinted-na-stroke) [&>table>tfoot]:border-(--ui-color-design-tinted-na-stroke) [&>table>thead>tr]:border-b [&>table>tbody>tr:not(:last-child)]:border-b [&>table>tfoot]:border-t'
          },
          variants: {
            size: {
              xs: '[&>table>thead>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>td]:px-2 [&>table>thead>tr>td]:py-1 [&>table>thead>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>th]:px-2 [&>table>thead>tr>th]:py-1 [&>table>tbody>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>td]:px-2 [&>table>tbody>tr>td]:py-1 [&>table>tbody>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>th]:px-2 [&>table>tbody>tr>th]:py-1 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>td]:px-2 [&>table>tfoot>tr>td]:py-1 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>th]:px-2 [&>table>tfoot>tr>th]:py-1',
              sm: '[&>table>thead>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>td]:px-3 [&>table>thead>tr>td]:py-2 [&>table>thead>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>th]:px-3 [&>table>thead>tr>th]:py-2 [&>table>tbody>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>td]:px-3 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>th]:px-3 [&>table>tbody>tr>th]:py-2 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>td]:px-3 [&>table>tfoot>tr>td]:py-2 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>th]:px-3 [&>table>tfoot>tr>th]:py-2',
              md: '[&>table>thead>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>td]:px-4 [&>table>thead>tr>td]:py-3.5 [&>table>thead>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-3.5 [&>table>tbody>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-3.5 [&>table>tbody>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>th]:px-4 [&>table>tbody>tr>th]:py-3.5 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>td]:px-4 [&>table>tfoot>tr>td]:py-3.5 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>th]:px-4 [&>table>tfoot>tr>th]:py-3.5',
              lg: '[&>table>thead>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>td]:px-5 [&>table>thead>tr>td]:py-4 [&>table>thead>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>th]:px-5 [&>table>thead>tr>th]:py-4 [&>table>tbody>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>td]:px-5 [&>table>tbody>tr>td]:py-4 [&>table>tbody>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>th]:px-5 [&>table>tbody>tr>th]:py-4 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>td]:px-5 [&>table>tfoot>tr>td]:py-4 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>th]:px-5 [&>table>tfoot>tr>th]:py-4'
            },
            rounded: {
              true: 'rounded-(--ui-border-radius-md)',
              false: ''
            },
            zebra: {
              true: '[&>table>tbody>tr]:even:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:even:[&>td]:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:even:[&>th]:bg-(--ui-color-bg-content-secondary) light:[&>table>tbody>tr]:even:bg-[#f6f8f9] light:[&>table>tbody>tr]:even:[&>td]:bg-[#f6f8f9] light:[&>table>tbody>tr]:even:[&>th]:bg-[#f6f8f9]'
            },
            pinRows: {
              true: '[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0      [&>table>thead>tr]:z-1 [&>table>thead>tr]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur [&>table>thead>tr]:shadow-bottom-sm [&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0   [&>table>tfoot>tr]:z-1 [&>table>tfoot>tr]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur [&>table>tfoot>tr]:shadow-top-sm'
            },
            pinCols: {
              true: '[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 [&>table>thead>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>thead>tr>th]:backdrop-blur [&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 [&>table>tbody>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tbody>tr>th]:backdrop-blur [&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 [&>table>tfoot>tr>th]:bg-(--ui-color-bg-content-primary) [&>table>tfoot>tr>th]:backdrop-blur'
            },
            rowHover: {
              true: '[&>table>tbody>tr]:hover:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:hover:[&>td]:bg-(--ui-color-bg-content-secondary) [&>table>tbody>tr]:hover:[&>th]:bg-(--ui-color-bg-content-secondary) light:[&>table>tbody>tr]:hover:bg-[#f6f8f9] light:[&>table>tbody>tr]:hover:[&>td]:bg-[#f6f8f9] light:[&>table>tbody>tr]:hover:[&>th]:bg-[#f6f8f9]'
            },
            bordered: {
              true: 'border border-(--ui-color-design-tinted-na-stroke)'
            },
            scrollbarThin: {
              true: 'scrollbar-thin'
            }
          },
          defaultVariants: {
            size: 'md',
            scrollbarThin: true
          }
        }
      }
    })
  ]
})

Table

A responsive data table component.

Timeline

A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.