v2.5.3

TableWrapper

Wrapper for displaying a html table
GitHub
Demo

Usage

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.

#CompanyDeal StageAmount
1Tech Innovators Inc.Proposal Sent50,000
2Global Solutions Ltd.Negotiation120,000
3Future EnterprisesContract Signed200,000
4Bright Ideas Co.Initial Contact15,000
5NextGen TechnologiesClosing300,000
Total: 685,00 
<template>
  <B24TableWrapper class="overflow-x-auto w-full">
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

Size

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

#CompanyDeal StageAmount
1Tech Innovators Inc.Proposal Sent50,000
2Global Solutions Ltd.Negotiation120,000
3Future EnterprisesContract Signed200,000
4Bright Ideas Co.Initial Contact15,000
5NextGen TechnologiesClosing300,000
Total: 685,00 
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    size="xs"
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

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.

#CompanyDeal StageAmount
1Tech Innovators Inc.Proposal Sent50,000
2Global Solutions Ltd.Negotiation120,000
3Future EnterprisesContract Signed200,000
4Bright Ideas Co.Initial Contact15,000
5NextGen TechnologiesClosing300,000
Total: 685,00 
<template>
  <B24Card
    variant="outline-copilot"
    class="w-full"
    :b24ui="{ body: 'p-0 sm:px-0 sm:py-0' }"
  >
    <B24TableWrapper
      class="overflow-x-auto w-full"
      rounded
      :b24ui="{
        base: '[&>table>thead>tr]:border-(--ui-color-design-filled-copilot-stroke) [&>table>tbody>tr]:border-(--ui-color-design-tinted-a1-bg) [&>table>tfoot]:border-(--ui-color-design-filled-copilot-stroke)'
      }"
    >
      <table>
        <!-- head -->
        <thead>
          <tr>
            <th>#</th>
            <th>Company</th>
            <th>Deal Stage</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <!-- row 1 -->
          <tr>
            <th>1</th>
            <td>Tech Innovators Inc.</td>
            <td>Proposal Sent</td>
            <td>50,000</td>
          </tr>
          <!-- row 2 -->
          <tr>
            <th>2</th>
            <td>Global Solutions Ltd.</td>
            <td>Negotiation</td>
            <td>120,000</td>
          </tr>
          <!-- row 3 -->
          <tr>
            <th>3</th>
            <td>Future Enterprises</td>
            <td>Contract Signed</td>
            <td>200,000</td>
          </tr>
          <!-- row 4 -->
          <tr>
            <th>4</th>
            <td>Bright Ideas Co.</td>
            <td>Initial Contact</td>
            <td>15,000</td>
          </tr>
          <!-- row 5 -->
          <tr>
            <th>5</th>
            <td>NextGen Technologies</td>
            <td>Closing</td>
            <td>300,000</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="3" class="text-right">
              Total:
            </th>
            <td>
              685,00
            </td>
          </tr>
        </tfoot>
      </table>
    </B24TableWrapper>
  </B24Card>
</template>

Rounded

To round the corners, use the rounded parameter.

#CompanyDeal StageAmount
1Tech Innovators Inc.Proposal Sent50,000
2Global Solutions Ltd.Negotiation120,000
3Future EnterprisesContract Signed200,000
4Bright Ideas Co.Initial Contact15,000
5NextGen TechnologiesClosing300,000
Total: 685,00 
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full dark bg-(--ui-color-gray-90)"
    rounded
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

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.

#CompanyDeal StageAmount
1Tech Innovators Inc.Proposal Sent50,000
2Global Solutions Ltd.Negotiation120,000
3Future EnterprisesContract Signed200,000
4Bright Ideas Co.Initial Contact15,000
5NextGen TechnologiesClosing300,000
Total: 685,00 
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    zebra
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr class="hover:bg-(--ui-color-copilot-accent-primary)/20">
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

Row hover

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

#CompanyDeal StageAmount
1Tech Innovators Inc.Proposal Sent50,000
2Global Solutions Ltd.Negotiation120,000
3Future EnterprisesContract Signed200,000
4Bright Ideas Co.Initial Contact15,000
5NextGen TechnologiesClosing300,000
Total: 685,00 
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    row-hover
  >
    <table>
      <!-- head -->
      <thead>
        <tr>
          <th>#</th>
          <th>Company</th>
          <th>Deal Stage</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr>
          <th>1</th>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>50,000</td>
        </tr>
        <!-- row 2 -->
        <tr>
          <th>2</th>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>120,000</td>
        </tr>
        <!-- row 3 -->
        <tr>
          <th>3</th>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>200,000</td>
        </tr>
        <!-- row 4 -->
        <tr>
          <th>4</th>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>15,000</td>
        </tr>
        <!-- row 5 -->
        <tr>
          <th>5</th>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>300,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3" class="text-right">
            Total:
          </th>
          <td>
            685,00
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

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
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full h-[400px]"
    size="xs"
    pin-rows
  >
    <table>
      <thead>
        <tr>
          <th>A</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>AlphaTech Solutions</td></tr>
        <tr><td>Apex Innovations</td></tr>
        <tr><td>AstroCore Systems</td></tr>
        <tr><td>Atomix Enterprises</td></tr>
        <tr><td>Aurora Dynamics</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>B</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>BlueWave Technologies</td></tr>
        <tr><td>BrightPath Solutions</td></tr>
        <tr><td>BoldFuture Inc.</td></tr>
        <tr><td>BioNova Industries</td></tr>
        <tr><td>BeaconWorks</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>CyberForge Ltd.</td></tr>
        <tr><td>CloudHaven Systems</td></tr>
        <tr><td>CrimsonLogic</td></tr>
        <tr><td>Catalyst Innovations</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>D</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>DeltaCore Technologies</td></tr>
        <tr><td>Dynamo Solutions</td></tr>
        <tr><td>DataSphere Inc.</td></tr>
        <tr><td>DreamForge Industries</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>E</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Eclipse Systems</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>F</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>FusionWorks</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>G</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>GreenPulse Technologies</td></tr>
        <tr><td>GlobeForge Solutions</td></tr>
        <tr><td>GoldenAxis Inc.</td></tr>
        <tr><td>GalacticCore</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>H</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Hyperion Dynamics</td></tr>
        <tr><td>HaloTech Industries</td></tr>
        <tr><td>HorizonWorks</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>I</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>InfinityForge</td></tr>
        <tr><td>Ironclad Solutions</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>M</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>MetaCore Systems</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>R</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Radiant Innovations</td></tr>
        <tr><td>RocketForge Ltd.</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>S</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Skyline Technologies</td></tr>
        <tr><td>SolarFlare Systems</td></tr>
        <tr><td>StellarCore Inc.</td></tr>
        <tr><td>SynapseWorks</td></tr>
        <tr><td>Summit Dynamics</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>T</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>TechNova Solutions</td></tr>
        <tr><td>TitanForge Industries</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>W</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>WaveFront Technologies</td></tr>
        <tr><td>WhiteHaven Systems</td></tr>
        <tr><td>WiseCore Inc.</td></tr>
        <tr><td>WorldForge Solutions</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>X</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Xenon Innovations</td></tr>
      </tbody>
      <thead>
        <tr>
          <th>Z</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>ZenithCore Systems</td></tr>
        <tr><td>ZephyrWorks</td></tr>
      </tbody>
    </table>
  </B24TableWrapper>
</template>

Pinned columns

To pin columns, use the pinCols property.

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

Deal NameCompanyDeal StageAmountAssigned ToStart DateNotes
1Tech Upgrade ProjectTech Innovators Inc.Proposal Sent150,000John Doe01/15/2023Waiting for feedback1
2Global Expansion PlanGlobal Solutions Ltd.Negotiation500,000Jane Smith02/10/2023Key decision maker2
3New Product LaunchFuture EnterprisesContract Signed300,000Michael Brown03/05/2023Delivery in progress3
4Marketing CampaignBright Ideas Co.Initial Contact75,000Emily Davis04/20/2023Budget approved4
5IT Infrastructure DealNextGen TechnologiesClosing1,000,000David Wilson05/12/2023Finalizing details5
6HR Software ImplementationPeople First Inc.Proposal Sent200,000Sophi Biles06/01/2023Awaiting approval6
7Logistics OptimizationLogistics ProNegotiation450,000Reid Semiras07/18/2023Discussing terms7
8Sales Training ProgramGlobal Sales Ltd.Contract Signed120,000Alec Lethby08/22/2023Training scheduled8
9Product RedesignInnovate Corp.Initial Contact90,000Florida Garces09/05/2023Initial discussions9
10Cloud MigrationTech Solutions Inc.Closing600,000Maribeth Popping10/10/2023Final review10
11Customer Support UpgradeZemlak, Daniel and LeannonProposal Sent85,000Hart Hagerty11/15/2023Pending approval11
12Financial AuditCarroll GroupNegotiation250,000Brice Swyre12/01/2023Scope finalized12
13Office RenovationRowe-SchoenContract Signed180,000Marjy Ferencz01/10/2024Work in progress13
14Cybersecurity UpgradeWyman-LednerInitial Contact300,000Yancy Tear02/05/2024Initial assessment14
15Employee Wellness ProgramSchuster-SchimmelClosing95,000Meghann Durtnal03/12/2024Finalizing details15
16Data Analytics ProjectWiza, Bins and EmardProposal Sent220,000Irma Vasilik04/18/2024Awaiting feedback16
17E-commerce PlatformO'Hara, Welch and KeeblerNegotiation700,000Sammy Seston05/22/2024Key terms discussed17
18AI IntegrationTurner-KuhlmanContract Signed1,200,000Lesya Tinham06/30/2024Implementation started18
19Supply Chain OptimizationKshlerin, Rogahn and SwaniawskiInitial Contact400,000Aland Wilber07/15/2024Initial discussions19
20Product Launch EventSauer LLCClosing150,000Zaneta Tewkesbury08/20/2024Final preparations20
21Mobile App DevelopmentHilpert GroupProposal Sent350,000Andy Tipple09/25/2024Awaiting approval21
22Customer Loyalty ProgramGutmann IncNegotiation120,000Sophi Biles10/10/2024Terms under review22
23ERP System ImplementationGaylord, Pacocha and BaumbachContract Signed900,000Florida Garces11/15/2024Project kickoff23
24Digital Marketing CampaignDeckow-PourosInitial Contact200,000Maribeth Popping12/20/2024Initial discussions24
25Warehouse AutomationSchiller, Cole and HackettClosing1,500,000Moritz Dryburgh01/05/2025Finalizing details25
Deal NameCompanyDeal StageAmountAssigned ToStart DateNotes
<template>
  <B24TableWrapper
    class="overflow-x-auto w-full h-[400px]"
    size="xs"
    pin-cols
    pin-rows
    row-hover
  >
    <table>
      <colgroup>
        <col>
        <col style="min-width: 200px">
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th />
          <td>Deal Name</td>
          <td>Company</td>
          <td>Deal Stage</td>
          <td>Amount</td>
          <td>Assigned To</td>
          <td>Start Date</td>
          <td>Notes</td>
          <th />
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1</th>
          <td>Tech Upgrade Project</td>
          <td>Tech Innovators Inc.</td>
          <td>Proposal Sent</td>
          <td>150,000</td>
          <td>John Doe</td>
          <td>01/15/2023</td>
          <td>Waiting for feedback</td>
          <th>1</th>
        </tr>
        <tr>
          <th>2</th>
          <td>Global Expansion Plan</td>
          <td>Global Solutions Ltd.</td>
          <td>Negotiation</td>
          <td>500,000</td>
          <td>Jane Smith</td>
          <td>02/10/2023</td>
          <td>Key decision maker</td>
          <th>2</th>
        </tr>
        <tr>
          <th>3</th>
          <td>New Product Launch</td>
          <td>Future Enterprises</td>
          <td>Contract Signed</td>
          <td>300,000</td>
          <td>Michael Brown</td>
          <td>03/05/2023</td>
          <td>Delivery in progress</td>
          <th>3</th>
        </tr>
        <tr>
          <th>4</th>
          <td>Marketing Campaign</td>
          <td>Bright Ideas Co.</td>
          <td>Initial Contact</td>
          <td>75,000</td>
          <td>Emily Davis</td>
          <td>04/20/2023</td>
          <td>Budget approved</td>
          <th>4</th>
        </tr>
        <tr>
          <th>5</th>
          <td>IT Infrastructure Deal</td>
          <td>NextGen Technologies</td>
          <td>Closing</td>
          <td>1,000,000</td>
          <td>David Wilson</td>
          <td>05/12/2023</td>
          <td>Finalizing details</td>
          <th>5</th>
        </tr>
        <tr>
          <th>6</th>
          <td>HR Software Implementation</td>
          <td>People First Inc.</td>
          <td>Proposal Sent</td>
          <td>200,000</td>
          <td>Sophi Biles</td>
          <td>06/01/2023</td>
          <td>Awaiting approval</td>
          <th>6</th>
        </tr>
        <tr>
          <th>7</th>
          <td>Logistics Optimization</td>
          <td>Logistics Pro</td>
          <td>Negotiation</td>
          <td>450,000</td>
          <td>Reid Semiras</td>
          <td>07/18/2023</td>
          <td>Discussing terms</td>
          <th>7</th>
        </tr>
        <tr>
          <th>8</th>
          <td>Sales Training Program</td>
          <td>Global Sales Ltd.</td>
          <td>Contract Signed</td>
          <td>120,000</td>
          <td>Alec Lethby</td>
          <td>08/22/2023</td>
          <td>Training scheduled</td>
          <th>8</th>
        </tr>
        <tr>
          <th>9</th>
          <td>Product Redesign</td>
          <td>Innovate Corp.</td>
          <td>Initial Contact</td>
          <td>90,000</td>
          <td>Florida Garces</td>
          <td>09/05/2023</td>
          <td>Initial discussions</td>
          <th>9</th>
        </tr>
        <tr>
          <th>10</th>
          <td>Cloud Migration</td>
          <td>Tech Solutions Inc.</td>
          <td>Closing</td>
          <td>600,000</td>
          <td>Maribeth Popping</td>
          <td>10/10/2023</td>
          <td>Final review</td>
          <th>10</th>
        </tr>
        <tr>
          <th>11</th>
          <td>Customer Support Upgrade</td>
          <td>Zemlak, Daniel and Leannon</td>
          <td>Proposal Sent</td>
          <td>85,000</td>
          <td>Hart Hagerty</td>
          <td>11/15/2023</td>
          <td>Pending approval</td>
          <th>11</th>
        </tr>
        <tr>
          <th>12</th>
          <td>Financial Audit</td>
          <td>Carroll Group</td>
          <td>Negotiation</td>
          <td>250,000</td>
          <td>Brice Swyre</td>
          <td>12/01/2023</td>
          <td>Scope finalized</td>
          <th>12</th>
        </tr>
        <tr>
          <th>13</th>
          <td>Office Renovation</td>
          <td>Rowe-Schoen</td>
          <td>Contract Signed</td>
          <td>180,000</td>
          <td>Marjy Ferencz</td>
          <td>01/10/2024</td>
          <td>Work in progress</td>
          <th>13</th>
        </tr>
        <tr>
          <th>14</th>
          <td>Cybersecurity Upgrade</td>
          <td>Wyman-Ledner</td>
          <td>Initial Contact</td>
          <td>300,000</td>
          <td>Yancy Tear</td>
          <td>02/05/2024</td>
          <td>Initial assessment</td>
          <th>14</th>
        </tr>
        <tr>
          <th>15</th>
          <td>Employee Wellness Program</td>
          <td>Schuster-Schimmel</td>
          <td>Closing</td>
          <td>95,000</td>
          <td>Meghann Durtnal</td>
          <td>03/12/2024</td>
          <td>Finalizing details</td>
          <th>15</th>
        </tr>
        <tr>
          <th>16</th>
          <td>Data Analytics Project</td>
          <td>Wiza, Bins and Emard</td>
          <td>Proposal Sent</td>
          <td>220,000</td>
          <td>Irma Vasilik</td>
          <td>04/18/2024</td>
          <td>Awaiting feedback</td>
          <th>16</th>
        </tr>
        <tr>
          <th>17</th>
          <td>E-commerce Platform</td>
          <td>O'Hara, Welch and Keebler</td>
          <td>Negotiation</td>
          <td>700,000</td>
          <td>Sammy Seston</td>
          <td>05/22/2024</td>
          <td>Key terms discussed</td>
          <th>17</th>
        </tr>
        <tr>
          <th>18</th>
          <td>AI Integration</td>
          <td>Turner-Kuhlman</td>
          <td>Contract Signed</td>
          <td>1,200,000</td>
          <td>Lesya Tinham</td>
          <td>06/30/2024</td>
          <td>Implementation started</td>
          <th>18</th>
        </tr>
        <tr>
          <th>19</th>
          <td>Supply Chain Optimization</td>
          <td>Kshlerin, Rogahn and Swaniawski</td>
          <td>Initial Contact</td>
          <td>400,000</td>
          <td>Aland Wilber</td>
          <td>07/15/2024</td>
          <td>Initial discussions</td>
          <th>19</th>
        </tr>
        <tr>
          <th>20</th>
          <td>Product Launch Event</td>
          <td>Sauer LLC</td>
          <td>Closing</td>
          <td>150,000</td>
          <td>Zaneta Tewkesbury</td>
          <td>08/20/2024</td>
          <td>Final preparations</td>
          <th>20</th>
        </tr>
        <tr>
          <th>21</th>
          <td>Mobile App Development</td>
          <td>Hilpert Group</td>
          <td>Proposal Sent</td>
          <td>350,000</td>
          <td>Andy Tipple</td>
          <td>09/25/2024</td>
          <td>Awaiting approval</td>
          <th>21</th>
        </tr>
        <tr>
          <th>22</th>
          <td>Customer Loyalty Program</td>
          <td>Gutmann Inc</td>
          <td>Negotiation</td>
          <td>120,000</td>
          <td>Sophi Biles</td>
          <td>10/10/2024</td>
          <td>Terms under review</td>
          <th>22</th>
        </tr>
        <tr>
          <th>23</th>
          <td>ERP System Implementation</td>
          <td>Gaylord, Pacocha and Baumbach</td>
          <td>Contract Signed</td>
          <td>900,000</td>
          <td>Florida Garces</td>
          <td>11/15/2024</td>
          <td>Project kickoff</td>
          <th>23</th>
        </tr>
        <tr>
          <th>24</th>
          <td>Digital Marketing Campaign</td>
          <td>Deckow-Pouros</td>
          <td>Initial Contact</td>
          <td>200,000</td>
          <td>Maribeth Popping</td>
          <td>12/20/2024</td>
          <td>Initial discussions</td>
          <th>24</th>
        </tr>
        <tr>
          <th>25</th>
          <td>Warehouse Automation</td>
          <td>Schiller, Cole and Hackett</td>
          <td>Closing</td>
          <td>1,500,000</td>
          <td>Moritz Dryburgh</td>
          <td>01/05/2025</td>
          <td>Finalizing details</td>
          <th>25</th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th />
          <td>Deal Name</td>
          <td>Company</td>
          <td>Deal Stage</td>
          <td>Amount</td>
          <td>Assigned To</td>
          <td>Start Date</td>
          <td>Notes</td>
          <th />
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

size'md' "md" | "xs" | "sm" | "lg"
roundedfalseboolean
zebrafalseboolean
pinRowsfalseboolean
pinColsfalseboolean
rowHoverfalseboolean
borderedfalseboolean
scrollbarThintrueboolean
b24ui { base?: ClassNameValue; }

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/table-wrapper.ts
export default {
  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.