Table

Organize data effectively with Bramble UI's table component. Create user-friendly web interfaces with modern table designs for seamless content presentation.

Usage

import {Table} from '@/ui'
import data from '@/data/carts.json'
                    
<Table
    data={data}
    height={200}
    ignore={['id']}
    caption='Shopping Cart'
    dividers={true}
/>

Output

Shopping Cart
Title	Price	Quantity	Total	Discount %	Discount Price
Spring and summer shoes	20	3	60	8.71	55
Washing Gloves	29	2	58	3.19	56
Moisturizer 100ml	40	2	80	13.1	70
Cargo Belt	930	1	930	17.67	766
Woolen Sweaters	600	2	1200	17.2	994
Kitchen Ceiling Lighting	30	2	60	14.89	51
Black Motorbike	569	3	1707	13.63	1474
Infinix INBOOK	1099	1	1099	11.83	969
Hyaluronic Acid Serum	19	1	19	13.31	16
Printed Graphic T-Shirt	46	3	138	16.44	115
Tank Tops	50	2	100	12.05	88
Tassel Earrings	45	3	135	17.75	111
Digital Watch	57	3	171	9.03	156
Sun Glasses	19	1	19	10.1	17
Cycle Bike Glow	35	1	35	11.08	31

Options

className?: string | undefined
data: any[]
height?: number | undefined
width?: number | undefined
ignore?: string[] | undefined
caption?: string | undefined
dividers?: boolean | undefined

RTL

Shopping Cart
Title	Price	Quantity	Total	Discount %	Discount Price
Spring and summer shoes	20	3	60	8.71	55
Washing Gloves	29	2	58	3.19	56
Moisturizer 100ml	40	2	80	13.1	70
Cargo Belt	930	1	930	17.67	766
Woolen Sweaters	600	2	1200	17.2	994
Kitchen Ceiling Lighting	30	2	60	14.89	51
Black Motorbike	569	3	1707	13.63	1474
Infinix INBOOK	1099	1	1099	11.83	969
Hyaluronic Acid Serum	19	1	19	13.31	16
Printed Graphic T-Shirt	46	3	138	16.44	115
Tank Tops	50	2	100	12.05	88
Tassel Earrings	45	3	135	17.75	111
Digital Watch	57	3	171	9.03	156
Sun Glasses	19	1	19	10.1	17
Cycle Bike Glow	35	1	35	11.08	31

<div dir='rtl'>
    <Table
        data={data}
        height={200}
        ignore={['id']}
        caption='Shopping Cart'
        dividers={true}
    />
</div>