Table

Default

Preview

Code

HTML

Code

JSX/TSX

Type	Left Icon	Description	Amount
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

<div class="overflow-scroll">
	<table class="table success">
		<thead>
			<tr>
				<th>Type</th>
				<th>
					<div class="flex items-center gap-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="icon icon-tabler icon-tabler-bell-plus-filled"
							width="15"
							height="15"
							viewBox="0 0 24 24"
							stroke-width="2"
							stroke="currentColor"
							fill="none"
							stroke-linecap="round"
							stroke-linejoin="round"
						>
							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
							<path
								d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z"
								stroke-width="0"
								fill="currentColor"
							/>
							<path
								d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z"
								stroke-width="0"
								fill="currentColor"
							/>
						</svg>
						<p>Left Icon</p>
					</div>
				</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>

<div className='overflow-scroll'>
  <table className='table success'>
    <thead>
      <tr>
        <th>
          Type
        </th>
        <th>
          <div className='flex items-center gap-2'>
            <svg xmlns='http://www.w3.org/2000/svg'
              className='icon icon-tabler icon-tabler-bell-plus-filled'
              width='15'
              height='15'
              viewBox='0 0 24 24'
              strokeWidth='2'
              stroke='currentColor'
              fill='none'
              strokeLinecap='round'
              strokeLinejoin='round'>
              <path stroke='none'
                d='M0 0h24v24H0z'
                fill='none' />
              <path d='M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z'
                strokeWidth='0'
                fill='currentColor' />
              <path d='M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z'
                strokeWidth='0'
                fill='currentColor' />
            </svg>
            <p>
              Left Icon
            </p>
          </div>
        </th>
        <th>
          Description
        </th>
        <th>
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          1
        </th>
        <td>
          Cy Ganderton
        </td>
        <td>
          Quality Control Specialist
        </td>
        <td>
          Blue
        </td>
      </tr>
      <tr>
        <th>
          2
        </th>
        <td>
          Hart Hagerty
        </td>
        <td>
          Desktop Support Technician
        </td>
        <td>
          Purple
        </td>
      </tr>
      <tr>
        <th>
          3
        </th>
        <td>
          Brice Swyre
        </td>
        <td>
          Tax Accountant
        </td>
        <td>
          Red
        </td>
      </tr>
    </tbody>
  </table>
</div>

Bordered

Preview

Code

HTML

Code

JSX/TSX

Type	Where	Description	Amount
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

<div class="overflow-scroll">
	<table class="table success bordered">
		<thead>
			<tr>
				<th>Type</th>
				<th>Where</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>

<div className='overflow-scroll'>
  <table className='table success bordered'>
    <thead>
      <tr>
        <th>
          Type
        </th>
        <th>
          Where
        </th>
        <th>
          Description
        </th>
        <th>
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          1
        </th>
        <td>
          Cy Ganderton
        </td>
        <td>
          Quality Control Specialist
        </td>
        <td>
          Blue
        </td>
      </tr>
      <tr>
        <th>
          2
        </th>
        <td>
          Hart Hagerty
        </td>
        <td>
          Desktop Support Technician
        </td>
        <td>
          Purple
        </td>
      </tr>
      <tr>
        <th>
          3
        </th>
        <td>
          Brice Swyre
        </td>
        <td>
          Tax Accountant
        </td>
        <td>
          Red
        </td>
      </tr>
    </tbody>
  </table>
</div>

Zebra

Preview

Code

HTML

Code

JSX/TSX

Type	Where	Description	Amount
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

<div class="overflow-scroll">
	<table class="table zebra warn">
		<thead>
			<tr>
				<th>Type</th>
				<th>Where</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>

<div className='overflow-scroll'>
  <table className='table zebra warn'>
    <thead>
      <tr>
        <th>
          Type
        </th>
        <th>
          Where
        </th>
        <th>
          Description
        </th>
        <th>
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          1
        </th>
        <td>
          Cy Ganderton
        </td>
        <td>
          Quality Control Specialist
        </td>
        <td>
          Blue
        </td>
      </tr>
      <tr>
        <th>
          2
        </th>
        <td>
          Hart Hagerty
        </td>
        <td>
          Desktop Support Technician
        </td>
        <td>
          Purple
        </td>
      </tr>
      <tr>
        <th>
          3
        </th>
        <td>
          Brice Swyre
        </td>
        <td>
          Tax Accountant
        </td>
        <td>
          Red
        </td>
      </tr>
    </tbody>
  </table>
</div>

Compact

Preview

Code

HTML

Code

JSX/TSX

Type	Where	Description	Amount
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

<div class="overflow-scroll">
	<table class="table compact danger">
		<thead>
			<tr>
				<th>Type</th>
				<th>Where</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>

<div className='overflow-scroll'>
  <table className='table compact danger'>
    <thead>
      <tr>
        <th>
          Type
        </th>
        <th>
          Where
        </th>
        <th>
          Description
        </th>
        <th>
          Amount
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          1
        </th>
        <td>
          Cy Ganderton
        </td>
        <td>
          Quality Control Specialist
        </td>
        <td>
          Blue
        </td>
      </tr>
      <tr>
        <th>
          2
        </th>
        <td>
          Hart Hagerty
        </td>
        <td>
          Desktop Support Technician
        </td>
        <td>
          Purple
        </td>
      </tr>
      <tr>
        <th>
          3
        </th>
        <td>
          Brice Swyre
        </td>
        <td>
          Tax Accountant
        </td>
        <td>
          Red
        </td>
      </tr>
    </tbody>
  </table>
</div>

Switch Tabs