TableWrapper

Wrapper for displaying a html table

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.

Details

vue

<script setup lang="ts">
export interface ExampleProps {
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md'
})
</script>

<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    :size="size"
  >
    <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.

Details

vue

<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>

Border and background

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

To display the table border, use the bordered property.

To round the corners, use the rounded parameter.

Details

vue

<template>
  <B24TableWrapper
    class="overflow-x-auto w-full bg-linear-165 from-red-500/20 to-ai-500/10"
    bordered
    rounded
    :b24ui="{
      base: 'border-2 border-ai-500 [&>table>thead>tr]:border-ai-500 [&>table>tbody>tr]:border-ai-300 [&>table>tfoot]:border-ai-500'
    }"
  >
    <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>

Highlights row

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

Details

vue

<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 class="bg-ai-300 dark:bg-ai-700">
          <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 class="bg-collab-300 dark:bg-collab-700">
          <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,000
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

Highlights row on hover

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

Details

vue

<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 class="hover:bg-ai-300 dark:hover:bg-ai-700">
          <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 class="hover:bg-collab-300 dark:hover:bg-collab-700">
          <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,000
          </td>
        </tr>
      </tfoot>
    </table>
  </B24TableWrapper>
</template>

Zebra

If you need alternating rows, use the zebra property.

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

Details

vue

<template>
  <B24TableWrapper
    class="overflow-x-auto w-full"
    zebra
    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 class="hover:bg-ai-300 dark:hover:bg-ai-700">
          <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 class="hover:bg-collab-300 dark:hover:bg-collab-700">
          <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,000
          </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>.

Details

vue

<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 rows and cols

To pin columns, use the pinCols property.

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

Details

vue

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326

API

Props

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

Slots

Slot	Type
`default`	`{}`

TableWrapper ​

Usage ​

Size ​

Border and background ​

Highlights row ​

Highlights row on hover ​

Zebra ​

Pinned rows ​

Pinned rows and cols ​

API ​

Props ​

Slots ​

TableWrapper

Usage

Size

Border and background

Highlights row

Highlights row on hover

Zebra

Pinned rows

Pinned rows and cols

API

Props

Slots