Basic Tables

Default Table

Use table class to show bootstrap-based default table.

ID	Customer	Date	Invoice	Action
#VZ2110	Bobby Davis	October 15, 2021	$2,300	View More
#VZ2109	Christopher Neal	October 7, 2021	$5,500	View More
#VZ2108	Monkey Karry	October 5, 2021	$2,420	View More
#VZ2107	James White	October 2, 2021	$7,452	View More

Next.js Preview

<div className="table-responsive">
<Table className="align-middle table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Customer</th>
            <th scope="col">Date</th>
            <th scope="col">Invoice</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row"><a href="#" className="fw-medium">#VZ2110</a></th>
            <td>Bobby Davis</td>
            <td>October 15, 2021</td>
            <td>$2,300</td>
            <td><Link href="#" className="link-success">View More <i className="ri-arrow-right-line align-middle"></i></Link></td>
        </tr>
        <tr>
            <th scope="row"><a href="#" className="fw-medium">#VZ2109</a></th>
            <td>Christopher Neal</td>
            <td>October 7, 2021</td>
            <td>$5,500</td>
            <td><Link href="#" className="link-success">View More <i className="ri-arrow-right-line align-middle"></i></Link></td>
        </tr>
        <tr>
            <th scope="row"><a href="#" className="fw-medium">#VZ2108</a></th>
            <td>Monkey Karry</td>
            <td>October 5, 2021</td>
            <td>$2,420</td>
            <td><Link href="#" className="link-success">View More <i className="ri-arrow-right-line align-middle"></i></Link></td>
        </tr>
        <tr>
            <th scope="row"><a href="#" className="fw-medium">#VZ2107</a></th>
            <td>James White</td>
            <td>October 2, 2021</td>
            <td>$7,452</td>
            <td><Link href="#" className="link-success">View More <i className="ri-arrow-right-line align-middle"></i></Link></td>
        </tr>
    </tbody>
</Table>
</div>

Striped Rows

Use table-striped class to add zebra-striping to any table row within the <tbody>.

ID	Customer	Date	Invoice	Action
01	Bobby Davis	Nov 14, 2021	$2,410	Confirmed
02	Christopher Neal	Nov 21, 2021	$1,450	Waiting
03	Monkey Karry	Nov 24, 2021	$3,500	Confirmed
04	Aaron James	Nov 25, 2021	$6,875	Cancelled

Next.js Preview

<div className="table-responsive">
<Table className="table-striped table-nowrap align-middle mb-0">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Customer</th>
            <th scope="col">Date</th>
            <th scope="col">Invoice</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Bobby Davis</td>
            <td>Nov 14, 2021</td>
            <td>$2,410</td>
            <td><span className="badge bg-success">Confirmed</span></td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Christopher Neal</td>
            <td>Nov 21, 2021</td>
            <td>$1,450</td>
            <td><span className="badge bg-warning">Waiting</span></td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Monkey Karry</td>
            <td>Nov 24, 2021</td>
            <td>$3,500</td>
            <td><span className="badge bg-success">Confirmed</span></td>
        </tr>
        <tr>
            <td className="fw-medium">04</td>
            <td>Aaron James</td>
            <td>Nov 25, 2021</td>
            <td>$6,875</td>
            <td><span className="badge bg-danger">Cancelled</span></td>
        </tr>
    </tbody>
</Table>
</div>

Striped columns

Use .table-striped-columns to add zebra-striping to any table column.

ID	Name	Date	Total	Status
#VL2110	William Elmore	07 Oct, 2021	$24.05	Paid
#VL2109	Georgie Winters	07 Oct, 2021	$26.15	Paid
#VL2108	Whitney Meier	06 Oct, 2021	$21.25	Refund
#VL2107	Justin Maier	05 Oct, 2021	$25.03	Paid

Next.js Preview

<div className="table-responsive table-card">
<Table className="align-middle table-nowrap table-striped-columns mb-0">
    <thead className="table-light">
        <tr>
            <th scope="col" style={{width: "46px"}}>
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="cardtableCheck"/>
                    <Form.Label htmlFor="cardtableCheck"></Form.Label>
                </div>
            </th>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">Total</th>
            <th scope="col">Status</th>
            <th scope="col" style={{width: "150px"}}>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="cardtableCheck01"/>
                    <Form.Label htmlFor="cardtableCheck01"></Form.Label>
                </div>
            </td>
            <td><a href="#" className="fw-medium">#VL2110</a></td>
            <td>William Elmore</td>
            <td>07 Oct, 2021</td>
            <td>$24.05</td>
            <td><span className="badge bg-success">Paid</span></td>
            <td>
                <Button type="button" variant='light' className="btn-sm">Details</Button>
            </td>
        </tr>
        <tr>
            <td>
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="cardtableCheck02"/>
                    <Form.Label htmlFor="cardtableCheck02"></Form.Label>
                </div>
            </td>
            <td><a href="#" className="fw-medium">#VL2109</a></td>
            <td>Georgie Winters</td>
            <td>07 Oct, 2021</td>
            <td>$26.15</td>
            <td><span className="badge bg-success">Paid</span></td>
            <td>
                <Button type="button" variant='light' className="btn-sm">Details</Button>
            </td>
        </tr>
        <tr>
            <td>
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="cardtableCheck03"/>
                    <Form.Label htmlFor="cardtableCheck03"></Form.Label>
                </div>
            </td>
            <td><a href="#" className="fw-medium">#VL2108</a></td>
            <td>Whitney Meier</td>
            <td>06 Oct, 2021</td>
            <td>$21.25</td>
            <td><span className="badge bg-danger">Refund</span></td>
            <td>
                <Button type="button" variant='light'>Details</Button>
            </td>
        </tr>
        <tr>
            <td>
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="cardtableCheck04"/>
                    <Form.Label htmlFor="cardtableCheck04"></Form.Label>
                </div>
            </td>
            <td><a href="#" className="fw-medium">#VL2107</a></td>
            <td>Justin Maier</td>
            <td>05 Oct, 2021</td>
            <td>$25.03</td>
            <td><span className="badge bg-success">Paid</span></td>
            <td>
                <Button type="button" variant='light' className="btn-sm">Details</Button>
            </td>
        </tr>
    </tbody>
</Table>
</div>

Tables Colors

Use table-dark class to set dark color table body and table-success class to set success color table body respectively. use table- class with different color variation to set required table body color.

ID	Customer	Date	Invoice
01	Bobby Davis	Nov 14, 2021	$2,410
02	Christopher Neal	Nov 21, 2021	$1,450
03	Monkey Karry	Nov 24, 2021	$3,500
04	Aaron James	Nov 25, 2021	$6,875

ID	Invoice	Amount	Date	Status
01	Basic Plan	$860	Nov 22, 2021	Subscribed
02	Premium Plan	$1200	Nov 10, 2021	Unsubscribed
03	Basic Plan	$860	Nov 19, 2021	Subscribed
04	Corporate Plan	$1599	Nov 22, 2021	Subscribed

Next.js Preview

<Row>
<Col xl={6}>
    <div className="table-responsive">
        <Table className="table-dark table-striped table-nowrap mb-0">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Date</th>
                    <th scope="col">Invoice</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td className="fw-medium">01</td>
                    <td>Bobby Davis</td>
                    <td>Nov 14, 2021</td>
                    <td>$2,410</td>
                </tr>
                <tr>
                    <td className="fw-medium">02</td>
                    <td>Christopher Neal</td>
                    <td>Nov 21, 2021</td>
                    <td>$1,450</td>
                </tr>
                <tr>
                    <td className="fw-medium">03</td>
                    <td>Monkey Karry</td>
                    <td>Nov 24, 2021</td>
                    <td>$3,500</td>
                </tr>
                <tr>
                    <td className="fw-medium">04</td>
                    <td>Aaron James</td>
                    <td>Nov 25, 2021</td>
                    <td>$6,875</td>
                </tr>
            </tbody>
        </Table>
    </div>
</Col>

<Col xl={6}>
    <div className="table-responsive mt-4 mt-xl-0">
        <Table className="table-success table-striped table-nowrap align-middle mb-0">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Invoice</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Date</th>
                    <th scope="col">Status</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td className="fw-medium">01</td>
                    <td>Basic Plan</td>
                    <td>$860</td>
                    <td>Nov 22, 2021</td>
                    <td><i className="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                    <td>
                        <div className="hstack gap-3 flex-wrap">
                            <Link href="#" className="link-success fs-15"><i className="ri-edit-2-line"></i></Link>
                            <Link href="#" className="link-danger fs-15"><i className="ri-delete-bin-line"></i></Link>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="fw-medium">02</td>
                    <td>Premium Plan</td>
                    <td>$1200</td>
                    <td>Nov 10, 2021</td>
                    <td><i className="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
                    <td>
                        <div className="hstack gap-3 flex-wrap">
                            <Link href="#" className="link-success fs-15"><i className="ri-edit-2-line"></i></Link>
                            <Link href="#" className="link-danger fs-15"><i className="ri-delete-bin-line"></i></Link>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="fw-medium">03</td>
                    <td>Basic Plan</td>
                    <td>$860</td>
                    <td>Nov 19, 2021</td>
                    <td><i className="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                    <td>
                        <div className="hstack gap-3 flex-wrap">
                            <Link href="#" className="link-success fs-15"><i className="ri-edit-2-line"></i></Link>
                            <Link href="#" className="link-danger fs-15"><i className="ri-delete-bin-line"></i></Link>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="fw-medium">04</td>
                    <td>Corporate Plan</td>
                    <td>$1599</td>
                    <td>Nov 22, 2021</td>
                    <td><i className="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                    <td>
                        <div className="hstack gap-3 flex-wrap">
                            <Link href="#" className="link-success fs-15"><i className="ri-edit-2-line"></i></Link>
                            <Link href="#" className="link-danger fs-15"><i className="ri-delete-bin-line"></i></Link>
                        </div>
                    </td>
                </tr>
            </tbody>
        </Table>
    </div>
</Col>
</Row>

Hoverable Rows

Use table-hover class to enable a hover state on table rows within a <tbody>.

Order ID	Shop	Customer	Price
#541254265	Amezon	Cleo Carson	$4,521
#744145235	Shoppers	Juston Eichmann	$7,546
#9855126598	Flipkart	Bettie Johson	$1,350
#847512653	Shoppers	Maritza Blanda	$4,521

ID	Invoice	Amount	Date	Status	Action
01	Basic Plan	$860	Nov 22, 2021	Subscribed	Yes/No
02	Premium Plan	$1200	Nov 10, 2021	Unsubscribed	Yes/No
03	Basic Plan	$860	Nov 19, 2021	Subscribed	Yes/No
04	Corporate Plan	$1599	Nov 22, 2021	Subscribed	Yes/No

Next.js Preview

<Row>
<Col xl={6}>
    <div className="table-responsive">
        <Table className="table-hover align-middle table-nowrap mb-0">
            <thead>
                <tr>
                    <th scope="col" style={{width: "25px"}}>
                        <div className="form-check">
                            <Form.Check type="checkbox" id="checkAll" value="option1"/>
                        </div>
                    </th>
                    <th scope="col">Order ID</th>
                    <th scope="col">Shop</th>
                    <th scope="col">Customer</th>
                    <th scope="col">Price</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        <div className="form-check">
                            <Form.Check type="checkbox" id="inlineCheckbox2" value="option1" checked/>
                        </div>
                    </th>
                    <td>#541254265</td>
                    <td>Amezon</td>
                    <td>Cleo Carson</td>
                    <td>$4,521</td>
                    <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
                </tr>
                <tr>
                    <th scope="row">
                        <div className="form-check">
                            <Form.Check type="checkbox" id="inlineCheckbox3" value="option1" checked/>
                        </div>
                    </th>
                    <td>#744145235</td>
                    <td>Shoppers</td>
                    <td>Juston Eichmann</td>
                    <td>$7,546</td>
                    <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
                </tr>
                <tr>
                    <th scope="row">
                        <div className="form-check">
                            <Form.Check type="checkbox" id="inlineCheckbox4" value="option1"/>
                        </div>
                    </th>
                    <td>#9855126598</td>
                    <td>Flipkart</td>
                    <td>Bettie Johson</td>
                    <td>$1,350</td>
                    <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
                </tr>
                <tr>
                    <th scope="row">
                        <div className="form-check">
                            <Form.Check type="checkbox" id="inlineCheckbox5" value="option1"/>
                        </div>
                    </th>
                    <td>#847512653</td>
                    <td>Shoppers</td>
                    <td>Maritza Blanda</td>
                    <td>$4,521</td>
                    <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
                </tr>
            </tbody>
        </Table>
    </div>
</Col>

<Col xl={6}>
    <div className="table-responsive mt-4 mt-xl-0">
        <Table className="table-hover table-striped align-middle table-nowrap mb-0">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Invoice</th>
                    <th scope="col">Amount</th>
                    <th scope="col">Date</th>
                    <th scope="col">Status</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td className="fw-medium">01</td>
                    <td>Basic Plan</td>
                    <td>$860</td>
                    <td>Nov 22, 2021</td>
                    <td><i className="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                    <td>
                        <div className="form-check form-switch">
                            <Form.Control className="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" defaultChecked/>
                            <Form.Label className="ms-2" htmlFor="SwitchCheck1">Yes/No</Form.Label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="fw-medium">02</td>
                    <td>Premium Plan</td>
                    <td>$1200</td>
                    <td>Nov 10, 2021</td>
                    <td><i className="ri-close-circle-line align-middle text-danger"></i> Unsubscribed</td>
                    <td>
                        <div className="form-check form-switch">
                            <Form.Control className="form-check-input" type="checkbox" role="switch" id="SwitchCheck2"/>
                            <Form.Label className="ms-2" htmlFor="SwitchCheck2">Yes/No</Form.Label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="fw-medium">03</td>
                    <td>Basic Plan</td>
                    <td>$860</td>
                    <td>Nov 19, 2021</td>
                    <td><i className="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                    <td>
                        <div className="form-check form-switch">
                            <Form.Control className="form-check-input" type="checkbox" role="switch" id="SwitchCheck3"/>
                            <Form.Label className="ms-2" htmlFor="SwitchCheck3">Yes/No</Form.Label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className="fw-medium">04</td>
                    <td>Corporate Plan</td>
                    <td>$1599</td>
                    <td>Nov 22, 2021</td>
                    <td><i className="ri-checkbox-circle-line align-middle text-success"></i> Subscribed</td>
                    <td>
                        <div className="form-check form-switch">
                            <Form.Control className="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" defaultChecked/>
                            <Form.Label className="ms-2" htmlFor="SwitchCheck4">Yes/No</Form.Label>
                        </div>
                    </td>
                </tr>
            </tbody>
        </Table>
    </div>
</Col>
</Row>

Card Tables

Use table-card class to show card-based table within a <tbody>.

ID	Name	Date	Total	Status
#VL2110	William Elmore	07 Oct, 2021	$24.05	Paid
#VL2109	Georgie Winters	07 Oct, 2021	$26.15	Paid
#VL2108	Whitney Meier	06 Oct, 2021	$21.25	Refund
#VL2107	Justin Maier	05 Oct, 2021	$25.03	Paid

Next.js Preview

<div className="table-responsive table-card">
    <Table className="align-middle table-nowrap mb-0">
        <thead className="table-light">
            <tr>
                <th scope="col" style={{width: "46px"}}>
                    <div className="form-check">
                        <Form.Check type="checkbox" value="" id="cardtableCheck"/>
                        <Form.Label htmlFor="cardtableCheck"></Form.Label>
                    </div>
                </th>
                <th scope="col">ID</th>
                <th scope="col">Name</th>
                <th scope="col">Date</th>
                <th scope="col">Total</th>
                <th scope="col">Status</th>
                <th scope="col" style={{width: "150px"}}>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div className="form-check">
                        <Form.Check type="checkbox" value="" id="cardtableCheck01"/>
                        <Form.Label htmlFor="cardtableCheck01"></Form.Label>
                    </div>
                </td>
                <td><a href="#" className="fw-medium">#VL2110</a></td>
                <td>William Elmore</td>
                <td>07 Oct, 2021</td>
                <td>$24.05</td>
                <td><span className="badge bg-success">Paid</span></td>
                <td>
                    <Button type="button" variant='light' className="btn-sm">Details</Button>
                </td>
            </tr>
            <tr>
                <td>
                    <div className="form-check">
                        <Form.Check type="checkbox" value="" id="cardtableCheck02"/>
                        <Form.Label htmlFor="cardtableCheck02"></Form.Label>
                    </div>
                </td>
                <td><a href="#" className="fw-medium">#VL2109</a></td>
                <td>Georgie Winters</td>
                <td>07 Oct, 2021</td>
                <td>$26.15</td>
                <td><span className="badge bg-success">Paid</span></td>
                <td>
                    <Button type="button" variant='light' className="btn-sm">Details</Button>
                </td>
            </tr>
            <tr>
                <td>
                    <div className="form-check">
                        <Form.Check type="checkbox" value="" id="cardtableCheck03"/>
                        <Form.Label htmlFor="cardtableCheck03"></Form.Label>
                    </div>
                </td>
                <td><a href="#" className="fw-medium">#VL2108</a></td>
                <td>Whitney Meier</td>
                <td>06 Oct, 2021</td>
                <td>$21.25</td>
                <td><span className="badge bg-danger">Refund</span></td>
                <td>
                    <Button type="button" variant='light' className="btn-sm">Details</Button>
                </td>
            </tr>
            <tr>
                <td>
                    <div className="form-check">
                        <Form.Check type="checkbox" value="" id="cardtableCheck04"/>
                        <Form.Label htmlFor="cardtableCheck04"></Form.Label>
                    </div>
                </td>
                <td><a href="#" className="fw-medium">#VL2107</a></td>
                <td>Justin Maier</td>
                <td>05 Oct, 2021</td>
                <td>$25.03</td>
                <td><span className="badge bg-success">Paid</span></td>
                <td>
                    <Button type="button" variant='light' className="btn-sm">Details</Button>
                </td>
            </tr>
        </tbody>
    </Table>
    </div>

Active Tables

Use table-active class to highlight a table row or cell.

Order ID	Shop	Customer	Price
#541254265	Amezon	Cleo Carson	$4,521
#744145235	Shoppers	Juston Eichmann	$7,546
#9855126598	Flipkart	Bettie Johson	$1,350
#847512653	Shoppers	Maritza Blanda	$4,521

Next.js Preview

<div className="table-responsive">
<Table className="align-middle table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col" style={{width: "42px"}}>
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="activetableCheck"/>
                    <Form.Label htmlFor="activetableCheck"></Form.Label>
                </div>
            </th>
            <th scope="col">Order ID</th>
            <th scope="col">Shop</th>
            <th scope="col">Customer</th>
            <th scope="col">Price</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="activetableCheck01" checked/>
                    <Form.Label htmlFor="activetableCheck01"></Form.Label>
                </div>
            </th>
            <td>#541254265</td>
            <td>Amezon</td>
            <td>Cleo Carson</td>
            <td>$4,521</td>
            <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
        </tr>
        <tr className="table-active">
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="activetableCheck02" checked/>
                    <Form.Label htmlFor="activetableCheck02"></Form.Label>
                </div>
            </th>
            <td>#744145235</td>
            <td>Shoppers</td>
            <td>Juston Eichmann</td>
            <td>$7,546</td>
            <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
        </tr>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="activetableCheck03"/>
                    <Form.Label htmlFor="activetableCheck03"></Form.Label>
                </div>
            </th>
            <td>#9855126598</td>
            <td>Flipkart</td>
            <td>Bettie Johson</td>
            <td>$1,350</td>
            <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
        </tr>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="activetableCheck04"/>
                    <Form.Label htmlFor="activetableCheck04"></Form.Label>
                </div>
            </th>
            <td>#847512653</td>
            <td>Shoppers</td>
            <td className="table-active">Maritza Blanda</td>
            <td>$4,521</td>
            <td><Link href="#"><i className="ri-download-2-line fs-17 lh-1 align-middle"></i></Link></td>
        </tr>
    </tbody>
</Table>
</div>

Bordered Tables

Use table-bordered class to show borders on all sides of the table and cells.

ID	Title	Status	Assignee	Price
01	Implement new UX	Backlog	Lanora Sandoval	$4,521
02	Design syntax	In Progress	Calvin Garrett	$7,546
03	Configurable resources	Done	Florence Guzman	$1,350
04	Implement extensions	In Progress	Maritza Blanda	$4,521

Next.js Preview

<div className="table-responsive">
<Table className="table-bordered align-middle table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Title</th>
            <th scope="col">Status</th>
            <th scope="col">Assignee</th>
            <th scope="col">Price</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Implement new UX</td>
            <td><span className="badge badge-soft-primary">Backlog</span></td>
            <td>Lanora Sandoval</td>
            <td>$4,521</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Design syntax</td>
            <td><span className="badge badge-soft-secondary">In Progress</span></td>
            <td>Calvin Garrett</td>
            <td>$7,546</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Configurable resources</td>
            <td><span className="badge badge-soft-success">Done</span></td>
            <td>Florence Guzman</td>
            <td>$1,350</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">04</td>
            <td>Implement extensions</td>
            <td><span className="badge badge-soft-secondary">In Progress</span></td>
            <td>Maritza Blanda</td>
            <td>$4,521</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
    </tbody>
</Table>
</div>

Tables Border Colors

Use border- class with color variation class to set table border color.

ID	Title	Status	Assignee	Price
01	Implement new UX	Backlog	Lanora Sandoval	$4,521
02	Design syntax	In Progress	Calvin Garrett	$7,546
03	Configurable resources	Done	Florence Guzman	$1,350
04	Implement extensions	In Progress	Maritza Blanda	$4,521

Next.js Preview

<div className="table-responsive">
<Table className="table-bordered align-middle table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Title</th>
            <th scope="col">Status</th>
            <th scope="col">Assignee</th>
            <th scope="col">Price</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Implement new UX</td>
            <td><span className="badge badge-soft-primary">Backlog</span></td>
            <td>Lanora Sandoval</td>
            <td>$4,521</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Design syntax</td>
            <td><span className="badge badge-soft-secondary">In Progress</span></td>
            <td>Calvin Garrett</td>
            <td>$7,546</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Configurable resources</td>
            <td><span className="badge badge-soft-success">Done</span></td>
            <td>Florence Guzman</td>
            <td>$1,350</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">04</td>
            <td>Implement extensions</td>
            <td><span className="badge badge-soft-secondary">In Progress</span></td>
            <td>Maritza Blanda</td>
            <td>$4,521</td>
            <td>
                <Dropdown>
                    <Dropdown.Toggle as='a' className='arrow-none'>
                        <i className="ri-more-2-fill"></i>
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                        <Dropdown.Item href="#">View</Dropdown.Item>
                        <Dropdown.Item href="#">Edit</Dropdown.Item>
                        <Dropdown.Item href="#">Delete</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </td>
        </tr>
    </tbody>
</Table>
</div>

Tables Without Borders

Use table-borderless to set a table without borders.

ID	Name	Job Title	Date	Status
01	Annette Black	Industrial Designer	10, Nov 2021	Active
02	Bessie Cooper	Graphic Designer	13, Nov 2021	Active
03	Leslie Alexander	Product Manager	17, Nov 2021	Active
04	Lenora Sandoval	Applications Engineer	25, Nov 2021	Disabled

Next.js Preview

<div className="table-responsive">
<Table className="table-borderless align-middle table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td><span className="badge badge-soft-success">Active</span></td>
            <td>
                <div className="hstack gap-3 fs-15">
                    <Link to="#" className="link-primary"><i className="ri-settings-4-line"></i></Link>
                    <Link to="#" className="link-danger"><i className="ri-delete-bin-5-line"></i></Link>
                </div>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td><span className="badge badge-soft-success">Active</span></td>
            <td>
                <div className="hstack gap-3 fs-15">
                    <Link to="#" className="link-primary"><i className="ri-settings-4-line"></i></Link>
                    <Link to="#" className="link-danger"><i className="ri-delete-bin-5-line"></i></Link>
                </div>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>17, Nov 2021</td>
            <td><span className="badge badge-soft-success">Active</span></td>
            <td>
                <div className="hstack gap-3 fs-15">
                    <Link to="#" className="link-primary"><i className="ri-settings-4-line"></i></Link>
                    <Link to="#" className="link-danger"><i className="ri-delete-bin-5-line"></i></Link>
                </div>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">04</td>
            <td>Lenora Sandoval</td>
            <td>Applications Engineer</td>
            <td>25, Nov 2021</td>
            <td><span className="badge badge-soft-danger">Disabled</span></td>
            <td>
                <div className="hstack gap-3 fs-15">
                    <Link to="#" className="link-primary"><i className="ri-settings-4-line"></i></Link>
                    <Link to="#" className="link-danger"><i className="ri-delete-bin-5-line"></i></Link>
                </div>
            </td>
        </tr>
    </tbody>
</Table>
</div>

Small Tables

Use table-sm class to create any table more compact by cutting all cell padding in half.

ID	Title	Status	Assignee
01	Implement new UX	Backlog	Lanora Sandoval
02	Design syntax	In Progress	Calvin Garrett
03	Configurable resources	Done	Florence Guzman
04	Implement extensions	Backlog	Maritza Blanda
05	Applications Engineer	Done	Leslie Alexander

Next.js Preview

<div className="table-responsive">
<Table className="table-sm table-nowrap mb-0">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Title</th>
            <th scope="col">Status</th>
            <th scope="col">Assignee</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Implement new UX</td>
            <td><span className="badge badge-soft-primary">Backlog</span></td>
            <td>Lanora Sandoval</td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Design syntax</td>
            <td><span className="badge badge-soft-secondary">In Progress</span></td>
            <td>Calvin Garrett</td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Configurable resources</td>
            <td><span className="badge badge-soft-success">Done</span></td>
            <td>Florence Guzman</td>
        </tr>
        <tr>
            <td className="fw-medium">04</td>
            <td>Implement extensions</td>
            <td><span className="badge badge-soft-dark">Backlog</span></td>
            <td>Maritza Blanda</td>
        </tr>
        <tr>
            <td className="fw-medium">05</td>
            <td>Applications Engineer</td>
            <td>
                <span className="badge badge-soft-success">Done</span>
            </td>
            <td>Leslie Alexander</td>
        </tr>
    </tbody>
</Table>
</div>

Table Head

Use table-light or table-dark class to create <thead> appear light or dark.

Student	Course	Author	Payment	Status
Milana Scot	UI/UX design	Mitchell Flores	$450	Confirmed
Jassica Welsh	3d Animation	Dan Evgeni	$860	Waiting
Leslie Alexander	Logotype Design	Olimpia Jordan	$450	Waiting

Next.js Preview

<div className="table-responsive">
    <Table className="align-middle table-nowrap mb-0">
        <thead className="table-light">
            <tr>
                <th scope="col">Student</th>
                <th scope="col">Course</th>
                <th scope="col">Author</th>
                <th scope="col">Payment</th>
                <th scope="col">Process</th>
                <th scope="col">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Milana Scot</td>
                <td>UI/UX design</td>
                <td>Mitchell Flores</td>
                <td>$450</td>
                <td>
                    <ProgressBar variant="success" now={100} className="progress-sm"/>
                </td>
                <td><Button bsPrefix='a' href="#" className="link-success">Confirmed</Button></td>
            </tr>
            <tr>
                <td>Jassica Welsh</td>
                <td>3d Animation</td>
                <td>Dan Evgeni</td>
                <td>$860</td>
                <td>
                    <ProgressBar variant="warning" now={65} className="progress-sm"/>
                </td>
                <td><Button bsPrefix='a' href="#" className="link-warning">Waiting</Button></td>
            </tr>
            <tr>
                <td>Leslie Alexander</td>
                <td>Logotype Design</td>
                <td>Olimpia Jordan</td>
                <td>$450</td>
                <td>
                    <ProgressBar variant="warning" now={35} className="progress-sm"/>
                </td>
                <td><Button bsPrefix='a' href="#" className="link-warning">Waiting</Button></td>
            </tr>
        </tbody>
    </Table>
</div>

Table Foot

Add <tbody> attribute to group footer content in an HTML table.

ID	Name	Job Title	Date	Payment
01	Annette Black	Industrial Designer	10, Nov 2021	$450
02	Bessie Cooper	Graphic Designer	13, Nov 2021	$875
03	Leslie Alexander	Product Manager	17, Nov 2021	$410
Total				$940

Next.js Preview

<div className="table-responsive">
    <Table className="table-nowrap mb-0">
    <thead className="table-light">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Payment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td>$450</td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td>$875</td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>17, Nov 2021</td>
            <td>$410</td>
        </tr>
    </tbody>
    <tfoot className="table-light">
        <tr>
            <td colSpan={4}>Total</td>
            <td>$940</td>
        </tr>
    </tfoot>
</Table>
</div>

Captions

You can also put the <caption> attribute on the top of the table with caption-top class.

List of users
ID	Student	Course	Author
01	Milana Scot	UI/UX design	Mitchell Flores
02	Jassica Welsh	3d Animation	Dan Evgeni
03	Leslie Alexander	Logotype Design	Olimpia Jordan

Next.js Preview

<div className="table-responsive">
<Table className="caption-top table-nowrap mb-0">
    <caption>List of users</caption>
    <thead className="table-light">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Student</th>
            <th scope="col">Course</th>
            <th scope="col">Author</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Milana Scot</td>
            <td>UI/UX design</td>
            <td>Mitchell Flores</td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Jassica Welsh</td>
            <td>3d Animation</td>
            <td>Dan Evgeni</td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Leslie Alexander</td>
            <td>Logotype Design</td>
            <td>Olimpia Jordan</td>
        </tr>
    </tbody>
</Table>
</div>

Table Nesting

Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.

Name

Job Title

Date

Payment

Annette Black

Industrial Designer

10, Nov 2021

$450

ID	Student	Course	Author
I	Milana Scot	3d Animation	James Black
II	Juston Eichmann	Design syntax	Olimpia Jordan

Bessie Cooper

Graphic Designer

13, Nov 2021

$875

Leslie Alexander

Product Manager

16, Nov 2021

$410

Bettie Johson

Applications Engineer

24, Nov 2021

$620

Monkey Karry

Implement new UX

25, Nov 2021

$795

Next.js Preview

<div className="table-responsive">
<Table className="table-nowrap mb-0">
    <thead className="table-light">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Payment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td>$450</td>
        </tr>
        <tr>
            <td colSpan={5}>
                <table className="table table-nowrap mb-0">
                    <thead className="table-light">
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Student</th>
                            <th scope="col">Course</th>
                            <th scope="col">Author</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td className="fw-medium">I</td>
                            <td>Milana Scot</td>
                            <td>3d Animation</td>
                            <td>James Black</td>
                        </tr>
                        <tr>
                            <td className="fw-medium">II</td>
                            <td>Juston Eichmann</td>
                            <td>Design syntax</td>
                            <td>Olimpia Jordan</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td>$875</td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>16, Nov 2021</td>
            <td>$410</td>
        </tr>
        <tr>
            <td className="fw-medium">04</td>
            <td>Bettie Johson</td>
            <td>Applications Engineer</td>
            <td>24, Nov 2021</td>
            <td>$620</td>
        </tr>
        <tr>
            <td className="fw-medium">05</td>
            <td>Monkey Karry</td>
            <td>Implement new UX</td>
            <td>25, Nov 2021</td>
            <td>$795</td>
        </tr>
    </tbody>
</Table>
</div>

Variants

Use table- class with below-mentioned color variation class within <tr> to set color on table row.

#	Name	Position	Department
Default	Monkey Karry	Medical Specialist	Orthopedics
Primary	James White	Medical Assistant	Surgery
Secondary	Aaron James	Medical Specialist	Neurology
Success	Bettie Johson	Medical Specialist	Cardiology
Danger	Bessie Cooper	Medical Assistant	Surgery
Warning	Lenora Sandoval	Medical Assistant	Cardiology
Info	Eric Pierce	Medical Specialist	Neurology
Light	Ruth Zimmermann	Medical Specialist	Neurology
Dark	Leslie Alexander	Medical Assistant	Cardiology

Next.js Preview

<div className="table-responsive">
<Table className="table-nowrap mb-0">
    <thead className="table-light">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Job Title</th>
            <th scope="col">Date</th>
            <th scope="col">Payment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td className="fw-medium">01</td>
            <td>Annette Black</td>
            <td>Industrial Designer</td>
            <td>10, Nov 2021</td>
            <td>$450</td>
        </tr>
        <tr>
            <td colSpan={5}>
                <table className="table table-nowrap mb-0">
                    <thead className="table-light">
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Student</th>
                            <th scope="col">Course</th>
                            <th scope="col">Author</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td className="fw-medium">I</td>
                            <td>Milana Scot</td>
                            <td>3d Animation</td>
                            <td>James Black</td>
                        </tr>
                        <tr>
                            <td className="fw-medium">II</td>
                            <td>Juston Eichmann</td>
                            <td>Design syntax</td>
                            <td>Olimpia Jordan</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td className="fw-medium">02</td>
            <td>Bessie Cooper</td>
            <td>Graphic Designer</td>
            <td>13, Nov 2021</td>
            <td>$875</td>
        </tr>
        <tr>
            <td className="fw-medium">03</td>
            <td>Leslie Alexander</td>
            <td>Product Manager</td>
            <td>16, Nov 2021</td>
            <td>$410</td>
        </tr>
        <tr>
            <td className="fw-medium">04</td>
            <td>Bettie Johson</td>
            <td>Applications Engineer</td>
            <td>24, Nov 2021</td>
            <td>$620</td>
        </tr>
        <tr>
            <td className="fw-medium">05</td>
            <td>Monkey Karry</td>
            <td>Implement new UX</td>
            <td>25, Nov 2021</td>
            <td>$795</td>
        </tr>
    </tbody>
</Table>
</div>

Vertical alignment

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.

Heading	Heading	Heading	Heading
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell is aligned to the top.	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.

Next.js Preview

<div className="table-responsive">
<Table className="align-middle">
    <thead>
        <tr>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
            <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
            <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
            <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.</td>
        </tr>
        <tr className="align-bottom">
            <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
            <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
            <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
            <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.</td>
        </tr>
        <tr>
            <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
            <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
            <td className="align-top">This cell is aligned to the top.</td>
            <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.</td>
        </tr>
    </tbody>
</Table>
</div>

Responsive Tables

Use table-responsive class to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.

	ID	Date	Status	Customer	Purchased	Revenue
	#VZ2110	10 Oct, 14:47	Paid	Jordan Kennedy	Mastering the grid	$9.98
	#VZ2109	17 Oct, 02:10	Paid	Jackson Graham	Splashify	$270.60
	#VZ2108	26 Oct, 08:20	Refunded	Lauren Trujillo	Wireframing Kit for Figma	$145.42
	#VZ2107	02 Nov, 04:52	Cancel	Curtis Weaver	Wireframing Kit for Figma	$170.68
	#VZ2106	10 Nov, 07:20	Paid	Jason schuller	Splashify	$350.87
Total						$947.55

Next.js Preview

<div className="table-responsive">
<Table className="align-middle table-nowrap mb-0">
    <thead className="table-light">
        <tr>
            <th scope="col" style={{width: "42px"}}>
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="responsivetableCheck"/>
                    <Form.Label htmlFor="responsivetableCheck"></Form.Label>
                </div>
            </th>
            <th scope="col">ID</th>
            <th scope="col">Date</th>
            <th scope="col">Status</th>
            <th scope="col">Customer</th>
            <th scope="col">Purchased</th>
            <th scope="col">Revenue</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="responsivetableCheck01"/>
                    <Form.Label htmlFor="responsivetableCheck01"></Form.Label>
                </div>
            </th>
            <td><a href="#" className="fw-medium">#VZ2110</a></td>
            <td>10 Oct, 14:47</td>
            <td className="text-success"><i className="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
            <td>
                <div className="d-flex gap-2 align-items-center">
                    <div className="flex-shrink-0">
                        <Image src={avatar3} alt="" className="avatar-xs rounded-circle" />
                    </div>
                    <div className="flex-grow-1">
                        Jordan Kennedy
                    </div>
                </div>
            </td>
            <td>Mastering the grid</td>
            <td>$9.98</td>
        </tr>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="responsivetableCheck02"/>
                    <Form.Label htmlFor="responsivetableCheck02"></Form.Label>
                </div>
            </th>
            <td><a href="#" className="fw-medium">#VZ2109</a></td>
            <td>17 Oct, 02:10</td>
            <td className="text-success"><i className="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
            <td>
                <div className="d-flex gap-2 align-items-center">
                    <div className="flex-shrink-0">
                        <Image src={avatar4} alt="" className="avatar-xs rounded-circle" />
                    </div>
                    <div className="flex-grow-1">
                        Jackson Graham
                    </div>
                </div>
            </td>
            <td>Splashify</td>
            <td>$270.60</td>
        </tr>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="responsivetableCheck03"/>
                    <Form.Label htmlFor="responsivetableCheck03"></Form.Label>
                </div>
            </th>
            <td><a href="#" className="fw-medium">#VZ2108</a></td>
            <td>26 Oct, 08:20</td>
            <td className="text-primary"><i className="ri-refresh-line fs-17 align-middle"></i> Refunded</td>
            <td>
                <div className="d-flex gap-2 align-items-center">
                    <div className="flex-shrink-0">
                        <Image src={avatar5} alt="" className="avatar-xs rounded-circle" />
                    </div>
                    <div className="flex-grow-1">
                        Lauren Trujillo
                    </div>
                </div>
            </td>
            <td>Wireframing Kit for Figma</td>
            <td>$145.42</td>
        </tr>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="responsivetableCheck04"/>
                    <Form.Label htmlFor="responsivetableCheck04"></Form.Label>
                </div>
            </th>
            <td><a href="#" className="fw-medium">#VZ2107</a></td>
            <td>02 Nov, 04:52</td>
            <td className="text-danger"><i className="ri-close-circle-line fs-17 align-middle"></i> Cancel</td>
            <td>
                <div className="d-flex gap-2 align-items-center">
                    <div className="flex-shrink-0">
                        <Image src={avatar6} alt="" className="avatar-xs rounded-circle" />
                    </div>
                    <div className="flex-grow-1">
                        Curtis Weaver
                    </div>
                </div>
            </td>
            <td>Wireframing Kit for Figma</td>
            <td>$170.68</td>
        </tr>
        <tr>
            <th scope="row">
                <div className="form-check">
                    <Form.Check type="checkbox" value="" id="responsivetableCheck05"/>
                    <Form.Label htmlFor="responsivetableCheck05"></Form.Label>
                </div>
            </th>
            <td><a href="#" className="fw-medium">#VZ2106</a></td>
            <td>10 Nov, 07:20</td>
            <td className="text-success"><i className="ri-checkbox-circle-line fs-17 align-middle"></i> Paid</td>
            <td>
                <div className="d-flex gap-2 align-items-center">
                    <div className="flex-shrink-0">
                        <Image src={avatar1} alt="" className="avatar-xs rounded-circle" />
                    </div>
                    <div className="flex-grow-1">
                        Jason schuller
                    </div>
                </div>
            </td>
            <td>Splashify</td>
            <td>$350.87</td>
        </tr>
    </tbody>
    <tfoot className="table-light">
        <tr>
            <td colSpan={6}>Total</td>
            <td>$947.55</td>
        </tr>
    </tfoot>
</Table>                                         
</div>