Data table

1'use client'
2
3import { Badge } from '@/components/ui/badge'
4import { DataTable } from '@/components/ui/data-table'
5import { ColumnDef } from '@tanstack/react-table'
6
7type Product = {
8    id: string
9    code: string
10    name: string
11    category: string
12    price: number
13    stock: number
14    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
15    rating: number
16}
17
18const statusVariantMap: Record<
19    Product['status'],
20    'success' | 'secondary' | 'error'
21> = {
22    INSTOCK: 'success',
23    LOWSTOCK: 'secondary',
24    OUTOFSTOCK: 'error',
25}
26
27const columns: ColumnDef<Product>[] = [
28    { accessorKey: 'name', header: 'Product' },
29    { accessorKey: 'category', header: 'Category' },
30    { accessorKey: 'price', header: 'Price' },
31    { accessorKey: 'stock', header: 'Stock' },
32    {
33        accessorKey: 'status',
34        header: 'Status',
35        cell: ({ row }) => {
36            const status = row.getValue<Product['status']>('status')
37
38            return <Badge variant={statusVariantMap[status]}>{status}</Badge>
39        },
40    },
41]
42
43const data: Product[] = [
44    {
45        id: '1001',
46        code: 'p1001',
47        name: 'Wireless Mouse',
48        category: 'Electronics',
49        price: 29.99,
50        stock: 120,
51        status: 'INSTOCK',
52        rating: 4.3,
53    },
54    {
55        id: '1002',
56        code: 'p1002',
57        name: 'Mechanical Keyboard',
58        category: 'Electronics',
59        price: 89.99,
60        stock: 15,
61        status: 'LOWSTOCK',
62        rating: 4.7,
63    },
64    {
65        id: '1003',
66        code: 'p1003',
67        name: 'Office Chair',
68        category: 'Furniture',
69        price: 199,
70        stock: 0,
71        status: 'OUTOFSTOCK',
72        rating: 4.1,
73    },
74    {
75        id: '1004',
76        code: 'p1004',
77        name: 'Noise Cancelling Headphones',
78        category: 'Audio',
79        price: 149.99,
80        stock: 42,
81        status: 'INSTOCK',
82        rating: 4.6,
83    },
84    {
85        id: '1005',
86        code: 'p1005',
87        name: 'Smart Watch',
88        category: 'Wearables',
89        price: 179.99,
90        stock: 8,
91        status: 'LOWSTOCK',
92        rating: 4.4,
93    },
94    {
95        id: '1006',
96        code: 'p1006',
97        name: 'Laptop Stand',
98        category: 'Accessories',
99        price: 39.99,
100        stock: 65,
101        status: 'INSTOCK',
102        rating: 4.2,
103    },
104    {
105        id: '1007',
106        code: 'p1007',
107        name: 'USB-C Hub',
108        category: 'Accessories',
109        price: 49.99,
110        stock: 0,
111        status: 'OUTOFSTOCK',
112        rating: 4.0,
113    },
114]
115
116export function DataTableDemo() {
117    return (
118        <div className="space-y-6">
119            <DataTable columns={columns} data={data} />
120        </div>
121    )
122}
123

1'use client'
2
3import { RefreshCcwIcon } from 'lucide-react'
4
5import { Button } from '@/components/ui/button'
6import { DataTable } from '@/components/ui/data-table'
7import { ColumnDef } from '@tanstack/react-table'
8
9type Product = {
10    id: string
11    code: string
12    name: string
13    category: string
14    price: number
15    stock: number
16    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
17    rating: number
18}
19
20const columns: ColumnDef<Product>[] = [
21    { accessorKey: 'name', header: 'Product' },
22    { accessorKey: 'category', header: 'Category' },
23    { accessorKey: 'price', header: 'Price' },
24    { accessorKey: 'stock', header: 'Stock' },
25    { accessorKey: 'rating', header: 'Rating' },
26]
27
28const data: Product[] = [
29    {
30        id: '1001',
31        code: 'p1001',
32        name: 'Wireless Mouse',
33        category: 'Electronics',
34        price: 29.99,
35        stock: 120,
36        status: 'INSTOCK',
37        rating: 4.3,
38    },
39    {
40        id: '1002',
41        code: 'p1002',
42        name: 'Mechanical Keyboard',
43        category: 'Electronics',
44        price: 89.99,
45        stock: 15,
46        status: 'LOWSTOCK',
47        rating: 4.7,
48    },
49    {
50        id: '1003',
51        code: 'p1003',
52        name: 'Office Chair',
53        category: 'Furniture',
54        price: 199,
55        stock: 0,
56        status: 'OUTOFSTOCK',
57        rating: 4.1,
58    },
59    {
60        id: '1004',
61        code: 'p1004',
62        name: 'Noise Cancelling Headphones',
63        category: 'Audio',
64        price: 149.99,
65        stock: 42,
66        status: 'INSTOCK',
67        rating: 4.6,
68    },
69    {
70        id: '1005',
71        code: 'p1005',
72        name: 'Smart Watch',
73        category: 'Wearables',
74        price: 179.99,
75        stock: 8,
76        status: 'LOWSTOCK',
77        rating: 4.4,
78    },
79    {
80        id: '1006',
81        code: 'p1006',
82        name: 'Laptop Stand',
83        category: 'Accessories',
84        price: 39.99,
85        stock: 65,
86        status: 'INSTOCK',
87        rating: 4.2,
88    },
89    {
90        id: '1007',
91        code: 'p1007',
92        name: 'USB-C Hub',
93        category: 'Accessories',
94        price: 49.99,
95        stock: 0,
96        status: 'OUTOFSTOCK',
97        rating: 4.0,
98    },
99]
100
101export function DataTableHeaderFooter() {
102    const header = (
103        <div className="flex w-full items-center justify-between">
104            <h4 className="text-lg font-semibold">Products</h4>
105        </div>
106    )
107
108    const footer = (
109        <span>
110            In total there are <strong>{data.length}</strong> products.
111        </span>
112    )
113
114    return (
115        <div className="space-y-6">
116            <DataTable
117                columns={columns}
118                data={data}
119                header={header}
120                footer={footer}
121            />
122        </div>
123    )
124}
125

1'use client'
2
3import React from 'react'
4
5import { Badge } from '@/components/ui/badge'
6import { DataTable } from '@/components/ui/data-table'
7import { ColumnDef } from '@tanstack/react-table'
8
9type Product = {
10    id: string
11    code: string
12    name: string
13    category: string
14    price: number
15    stock: number
16    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
17    rating: number
18}
19
20const statusVariantMap: Record<
21    Product['status'],
22    'success' | 'secondary' | 'error'
23> = {
24    INSTOCK: 'success',
25    LOWSTOCK: 'secondary',
26    OUTOFSTOCK: 'error',
27}
28
29const columns: ColumnDef<Product>[] = [
30    { accessorKey: 'name', header: 'Product' },
31    { accessorKey: 'category', header: 'Category' },
32    { accessorKey: 'price', header: 'Price' },
33    { accessorKey: 'stock', header: 'Stock' },
34    {
35        accessorKey: 'status',
36        header: 'Status',
37        cell: ({ row }) => {
38            const status = row.getValue<Product['status']>('status')
39
40            return <Badge variant={statusVariantMap[status]}>{status}</Badge>
41        },
42    },
43]
44
45const data: Product[] = [
46    {
47        id: '1001',
48        code: 'p1001',
49        name: 'Wireless Mouse',
50        category: 'Electronics',
51        price: 29.99,
52        stock: 120,
53        status: 'INSTOCK',
54        rating: 4.3,
55    },
56    {
57        id: '1002',
58        code: 'p1002',
59        name: 'Mechanical Keyboard',
60        category: 'Electronics',
61        price: 89.99,
62        stock: 15,
63        status: 'LOWSTOCK',
64        rating: 4.7,
65    },
66    {
67        id: '1003',
68        code: 'p1003',
69        name: 'Office Chair',
70        category: 'Furniture',
71        price: 199,
72        stock: 0,
73        status: 'OUTOFSTOCK',
74        rating: 4.1,
75    },
76    {
77        id: '1004',
78        code: 'p1004',
79        name: 'Noise Cancelling Headphones',
80        category: 'Audio',
81        price: 149.99,
82        stock: 42,
83        status: 'INSTOCK',
84        rating: 4.6,
85    },
86    {
87        id: '1005',
88        code: 'p1005',
89        name: 'Smart Watch',
90        category: 'Wearables',
91        price: 179.99,
92        stock: 8,
93        status: 'LOWSTOCK',
94        rating: 4.4,
95    },
96    {
97        id: '1006',
98        code: 'p1006',
99        name: 'Laptop Stand',
100        category: 'Accessories',
101        price: 39.99,
102        stock: 65,
103        status: 'INSTOCK',
104        rating: 4.2,
105    },
106    {
107        id: '1007',
108        code: 'p1007',
109        name: 'USB-C Hub',
110        category: 'Accessories',
111        price: 49.99,
112        stock: 0,
113        status: 'OUTOFSTOCK',
114        rating: 4.0,
115    },
116]
117
118export function DataTableCheckbox() {
119    const footer = (
120        <span>
121            In total there are <strong>{data.length}</strong> products.
122        </span>
123    )
124
125    return (
126        <div className="space-y-6">
127            <DataTable
128                columns={columns}
129                data={data}
130                footer={footer}
131                selectable={true}
132                selectAll
133            />
134        </div>
135    )
136}
137

1'use client'
2
3import React from 'react'
4
5import { Badge } from '@/components/ui/badge'
6import { DataTable } from '@/components/ui/data-table'
7import { ColumnDef } from '@tanstack/react-table'
8
9type Product = {
10    id: string
11    code: string
12    name: string
13    category: string
14    price: number
15    stock: number
16    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
17    rating: number
18}
19
20const statusVariantMap: Record<
21    Product['status'],
22    'success' | 'secondary' | 'error'
23> = {
24    INSTOCK: 'success',
25    LOWSTOCK: 'secondary',
26    OUTOFSTOCK: 'error',
27}
28
29const columns: ColumnDef<Product>[] = [
30    { accessorKey: 'name', header: 'Product', enableSorting: true },
31    { accessorKey: 'category', header: 'Category' },
32    { accessorKey: 'price', header: 'Price', enableSorting: true },
33    { accessorKey: 'stock', header: 'Stock', enableSorting: true },
34    {
35        accessorKey: 'status',
36        header: 'Status',
37        cell: ({ row }) => {
38            const status = row.getValue<Product['status']>('status')
39
40            return <Badge variant={statusVariantMap[status]}>{status}</Badge>
41        },
42    },
43]
44
45const data: Product[] = [
46    {
47        id: '1001',
48        code: 'p1001',
49        name: 'Wireless Mouse',
50        category: 'Electronics',
51        price: 29.99,
52        stock: 120,
53        status: 'INSTOCK',
54        rating: 4.3,
55    },
56    {
57        id: '1002',
58        code: 'p1002',
59        name: 'Mechanical Keyboard',
60        category: 'Electronics',
61        price: 89.99,
62        stock: 15,
63        status: 'LOWSTOCK',
64        rating: 4.7,
65    },
66    {
67        id: '1003',
68        code: 'p1003',
69        name: 'Office Chair',
70        category: 'Furniture',
71        price: 199,
72        stock: 0,
73        status: 'OUTOFSTOCK',
74        rating: 4.1,
75    },
76    {
77        id: '1004',
78        code: 'p1004',
79        name: 'Noise Cancelling Headphones',
80        category: 'Audio',
81        price: 149.99,
82        stock: 42,
83        status: 'INSTOCK',
84        rating: 4.6,
85    },
86    {
87        id: '1005',
88        code: 'p1005',
89        name: 'Smart Watch',
90        category: 'Wearables',
91        price: 179.99,
92        stock: 8,
93        status: 'LOWSTOCK',
94        rating: 4.4,
95    },
96    {
97        id: '1006',
98        code: 'p1006',
99        name: 'Laptop Stand',
100        category: 'Accessories',
101        price: 39.99,
102        stock: 65,
103        status: 'INSTOCK',
104        rating: 4.2,
105    },
106    {
107        id: '1007',
108        code: 'p1007',
109        name: 'USB-C Hub',
110        category: 'Accessories',
111        price: 49.99,
112        stock: 0,
113        status: 'OUTOFSTOCK',
114        rating: 4.0,
115    },
116]
117
118export function DataTableSorting() {
119
120    const footer = (
121        <span>
122            In total there are <strong>{data.length}</strong> products.
123        </span>
124    )
125
126    return (
127        <div className="space-y-6">
128            <DataTable columns={columns} data={data} footer={footer} />
129        </div>
130    )
131}
132

1'use client'
2
3import React from 'react'
4import { RefreshCcwIcon } from 'lucide-react'
5
6import { Badge } from '@/components/ui/badge'
7import { Button } from '@/components/ui/button'
8import { DataTable } from '@/components/ui/data-table'
9import { ColumnDef } from '@tanstack/react-table'
10
11type Product = {
12    id: string
13    code: string
14    name: string
15    category: string
16    price: number
17    stock: number
18    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
19    rating: number
20}
21
22const statusVariantMap: Record<
23    Product['status'],
24    'success' | 'secondary' | 'error'
25> = {
26    INSTOCK: 'success',
27    LOWSTOCK: 'secondary',
28    OUTOFSTOCK: 'error',
29}
30
31const columns: ColumnDef<Product>[] = [
32    {
33        accessorKey: 'name',
34        header: 'Product',
35        enableSorting: true,
36        enableColumnFilter: true,
37    },
38    { accessorKey: 'category', header: 'Category', enableColumnFilter: true },
39    { accessorKey: 'price', header: 'Price', enableSorting: true },
40    {
41        accessorKey: 'stock',
42        header: 'Stock',
43        enableSorting: true,
44        enableColumnFilter: true,
45    },
46    {
47        accessorKey: 'status',
48        header: 'Status',
49        cell: ({ row }) => {
50            const status = row.getValue<Product['status']>('status')
51
52            return <Badge variant={statusVariantMap[status]}>{status}</Badge>
53        },
54    },
55]
56
57const data: Product[] = [
58    {
59        id: '1001',
60        code: 'p1001',
61        name: 'Wireless Mouse',
62        category: 'Electronics',
63        price: 29.99,
64        stock: 120,
65        status: 'INSTOCK',
66        rating: 4.3,
67    },
68    {
69        id: '1002',
70        code: 'p1002',
71        name: 'Mechanical Keyboard',
72        category: 'Electronics',
73        price: 89.99,
74        stock: 15,
75        status: 'LOWSTOCK',
76        rating: 4.7,
77    },
78    {
79        id: '1003',
80        code: 'p1003',
81        name: 'Office Chair',
82        category: 'Furniture',
83        price: 199,
84        stock: 0,
85        status: 'OUTOFSTOCK',
86        rating: 4.1,
87    },
88    {
89        id: '1004',
90        code: 'p1004',
91        name: 'Noise Cancelling Headphones',
92        category: 'Audio',
93        price: 149.99,
94        stock: 42,
95        status: 'INSTOCK',
96        rating: 4.6,
97    },
98    {
99        id: '1005',
100        code: 'p1005',
101        name: 'Smart Watch',
102        category: 'Wearables',
103        price: 179.99,
104        stock: 8,
105        status: 'LOWSTOCK',
106        rating: 4.4,
107    },
108    {
109        id: '1006',
110        code: 'p1006',
111        name: 'Laptop Stand',
112        category: 'Accessories',
113        price: 39.99,
114        stock: 65,
115        status: 'INSTOCK',
116        rating: 4.2,
117    },
118    {
119        id: '1007',
120        code: 'p1007',
121        name: 'USB-C Hub',
122        category: 'Accessories',
123        price: 49.99,
124        stock: 0,
125        status: 'OUTOFSTOCK',
126        rating: 4.0,
127    },
128]
129
130export function DataTableFilter() {
131    const footer = (
132        <span>
133            In total there are <strong>{data.length}</strong> products.
134        </span>
135    )
136
137    return (
138        <div className="space-y-6">
139            <DataTable
140                columns={columns}
141                data={data}
142                footer={footer}
143                globalFiltering
144            />
145        </div>
146    )
147}
148

1'use client'
2
3import React from 'react'
4import { RefreshCcwIcon } from 'lucide-react'
5
6import { Badge } from '@/components/ui/badge'
7import { Button } from '@/components/ui/button'
8import { DataTable } from '@/components/ui/data-table'
9import { ColumnDef } from '@tanstack/react-table'
10
11type Product = {
12    id: string
13    code: string
14    name: string
15    category: string
16    price: number
17    stock: number
18    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
19    rating: number
20}
21
22const statusVariantMap: Record<
23    Product['status'],
24    'success' | 'secondary' | 'error'
25> = {
26    INSTOCK: 'success',
27    LOWSTOCK: 'secondary',
28    OUTOFSTOCK: 'error',
29}
30
31const columns: ColumnDef<Product>[] = [
32    { accessorKey: 'name', header: 'Product', enableSorting: true },
33    { accessorKey: 'category', header: 'Category' },
34    { accessorKey: 'price', header: 'Price', enableSorting: true },
35    { accessorKey: 'stock', header: 'Stock', enableSorting: true },
36    {
37        accessorKey: 'status',
38        header: 'Status',
39        cell: ({ row }) => {
40            const status = row.getValue<Product['status']>('status')
41
42            return <Badge variant={statusVariantMap[status]}>{status}</Badge>
43        },
44    },
45]
46
47const data: Product[] = [
48    {
49        id: '1001',
50        code: 'p1001',
51        name: 'Wireless Mouse',
52        category: 'Electronics',
53        price: 29.99,
54        stock: 120,
55        status: 'INSTOCK',
56        rating: 4.3,
57    },
58    {
59        id: '1002',
60        code: 'p1002',
61        name: 'Mechanical Keyboard',
62        category: 'Electronics',
63        price: 89.99,
64        stock: 15,
65        status: 'LOWSTOCK',
66        rating: 4.7,
67    },
68    {
69        id: '1003',
70        code: 'p1003',
71        name: 'Office Chair',
72        category: 'Furniture',
73        price: 199,
74        stock: 0,
75        status: 'OUTOFSTOCK',
76        rating: 4.1,
77    },
78    {
79        id: '1004',
80        code: 'p1004',
81        name: 'Noise Cancelling Headphones',
82        category: 'Audio',
83        price: 149.99,
84        stock: 42,
85        status: 'INSTOCK',
86        rating: 4.6,
87    },
88    {
89        id: '1005',
90        code: 'p1005',
91        name: 'Smart Watch',
92        category: 'Wearables',
93        price: 179.99,
94        stock: 8,
95        status: 'LOWSTOCK',
96        rating: 4.4,
97    },
98    {
99        id: '1006',
100        code: 'p1006',
101        name: 'Laptop Stand',
102        category: 'Accessories',
103        price: 39.99,
104        stock: 65,
105        status: 'INSTOCK',
106        rating: 4.2,
107    },
108    {
109        id: '1007',
110        code: 'p1007',
111        name: 'USB-C Hub',
112        category: 'Accessories',
113        price: 49.99,
114        stock: 0,
115        status: 'OUTOFSTOCK',
116        rating: 4.0,
117    },
118    {
119        id: '1001',
120        code: 'p1001',
121        name: 'Wireless Mouse',
122        category: 'Electronics',
123        price: 29.99,
124        stock: 120,
125        status: 'INSTOCK',
126        rating: 4.3,
127    },
128    {
129        id: '1002',
130        code: 'p1002',
131        name: 'Mechanical Keyboard',
132        category: 'Electronics',
133        price: 89.99,
134        stock: 15,
135        status: 'LOWSTOCK',
136        rating: 4.7,
137    },
138    {
139        id: '1003',
140        code: 'p1003',
141        name: 'Office Chair',
142        category: 'Furniture',
143        price: 199,
144        stock: 0,
145        status: 'OUTOFSTOCK',
146        rating: 4.1,
147    },
148    {
149        id: '1004',
150        code: 'p1004',
151        name: 'Noise Cancelling Headphones',
152        category: 'Audio',
153        price: 149.99,
154        stock: 42,
155        status: 'INSTOCK',
156        rating: 4.6,
157    },
158    {
159        id: '1005',
160        code: 'p1005',
161        name: 'Smart Watch',
162        category: 'Wearables',
163        price: 179.99,
164        stock: 8,
165        status: 'LOWSTOCK',
166        rating: 4.4,
167    },
168    {
169        id: '1006',
170        code: 'p1006',
171        name: 'Laptop Stand',
172        category: 'Accessories',
173        price: 39.99,
174        stock: 65,
175        status: 'INSTOCK',
176        rating: 4.2,
177    },
178    {
179        id: '1007',
180        code: 'p1007',
181        name: 'USB-C Hub',
182        category: 'Accessories',
183        price: 49.99,
184        stock: 0,
185        status: 'OUTOFSTOCK',
186        rating: 4.0,
187    },
188]
189
190export function DataTablePagination() {
191    const footer = (
192        <span>
193            In total there are <strong>{data.length}</strong> products.
194        </span>
195    )
196
197    return (
198        <div className="space-y-6">
199            <DataTable
200                columns={columns}
201                data={data}
202                footer={footer}
203                pagination
204                pageSize={5}
205            />
206        </div>
207    )
208}
209

1'use client'
2
3import React from 'react'
4
5import { Button } from '@/components/ui/button'
6import { DataTable } from '@/components/ui/data-table'
7import { ColumnDef } from '@tanstack/react-table'
8
9type Product = {
10    id: string
11    code: string
12    name: string
13    category: string
14    price: number
15    stock: number
16    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
17    rating: number
18}
19
20const columns: ColumnDef<Product>[] = [
21    { accessorKey: 'name', header: 'Product' },
22    { accessorKey: 'category', header: 'Category' },
23    { accessorKey: 'price', header: 'Price' },
24    { accessorKey: 'stock', header: 'Stock' },
25    { accessorKey: 'rating', header: 'Rating' },
26]
27
28const data: Product[] = [
29    {
30        id: '1001',
31        code: 'p1001',
32        name: 'Wireless Mouse',
33        category: 'Electronics',
34        price: 29.99,
35        stock: 120,
36        status: 'INSTOCK',
37        rating: 4.3,
38    },
39    {
40        id: '1002',
41        code: 'p1002',
42        name: 'Mechanical Keyboard',
43        category: 'Electronics',
44        price: 89.99,
45        stock: 15,
46        status: 'LOWSTOCK',
47        rating: 4.7,
48    },
49    {
50        id: '1003',
51        code: 'p1003',
52        name: 'Office Chair',
53        category: 'Furniture',
54        price: 199,
55        stock: 0,
56        status: 'OUTOFSTOCK',
57        rating: 4.1,
58    },
59    {
60        id: '1004',
61        code: 'p1004',
62        name: 'Noise Cancelling Headphones',
63        category: 'Audio',
64        price: 149.99,
65        stock: 42,
66        status: 'INSTOCK',
67        rating: 4.6,
68    },
69    {
70        id: '1005',
71        code: 'p1005',
72        name: 'Smart Watch',
73        category: 'Wearables',
74        price: 179.99,
75        stock: 8,
76        status: 'LOWSTOCK',
77        rating: 4.4,
78    },
79    {
80        id: '1006',
81        code: 'p1006',
82        name: 'Laptop Stand',
83        category: 'Accessories',
84        price: 39.99,
85        stock: 65,
86        status: 'INSTOCK',
87        rating: 4.2,
88    },
89    {
90        id: '1007',
91        code: 'p1007',
92        name: 'USB-C Hub',
93        category: 'Accessories',
94        price: 49.99,
95        stock: 0,
96        status: 'OUTOFSTOCK',
97        rating: 4.0,
98    },
99]
100
101export function DataTableSize() {
102    const [size, setSize] = React.useState<'small' | 'normal' | 'large'>(
103        'small',
104    )
105
106    const footer = (
107        <span>
108            In total there are <strong>{data.length}</strong> products.
109        </span>
110    )
111
112    return (
113        <div className="space-y-6">
114            <div className="flex items-center justify-center gap-2">
115                <Button
116                    variant={size === 'small' ? 'primary' : 'outline'}
117                    size="sm"
118                    onClick={() => setSize('small')}
119                >
120                    Small
121                </Button>
122                <Button
123                    variant={size === 'normal' ? 'primary' : 'outline'}
124                    size="sm"
125                    onClick={() => setSize('normal')}
126                >
127                    Normal
128                </Button>
129                <Button
130                    variant={size === 'large' ? 'primary' : 'outline'}
131                    size="sm"
132                    onClick={() => setSize('large')}
133                >
134                    Large
135                </Button>
136            </div>
137            <DataTable
138                columns={columns}
139                data={data}
140                footer={footer}
141                size={size}
142            />
143        </div>
144    )
145}
146

1'use client'
2
3import React from 'react'
4import { RefreshCcwIcon } from 'lucide-react'
5
6import { Badge } from '@/components/ui/badge'
7import { Button } from '@/components/ui/button'
8import { DataTable } from '@/components/ui/data-table'
9import { ColumnDef } from '@tanstack/react-table'
10
11type Product = {
12    id: string
13    code: string
14    name: string
15    category: string
16    price: number
17    stock: number
18    status: 'INSTOCK' | 'LOWSTOCK' | 'OUTOFSTOCK'
19    rating: number
20}
21
22const statusVariantMap: Record<
23    Product['status'],
24    'success' | 'secondary' | 'error'
25> = {
26    INSTOCK: 'success',
27    LOWSTOCK: 'secondary',
28    OUTOFSTOCK: 'error',
29}
30
31const columns: ColumnDef<Product>[] = [
32    { accessorKey: 'name', header: 'Product' },
33    { accessorKey: 'category', header: 'Category' },
34    { accessorKey: 'price', header: 'Price' },
35    { accessorKey: 'stock', header: 'Stock' },
36    {
37        accessorKey: 'status',
38        header: 'Status',
39        cell: ({ row }) => {
40            const status = row.getValue<Product['status']>('status')
41
42            return <Badge variant={statusVariantMap[status]}>{status}</Badge>
43        },
44    },
45]
46
47const data: Product[] = [
48    {
49        id: '1001',
50        code: 'p1001',
51        name: 'Wireless Mouse',
52        category: 'Electronics',
53        price: 29.99,
54        stock: 120,
55        status: 'INSTOCK',
56        rating: 4.3,
57    },
58    {
59        id: '1002',
60        code: 'p1002',
61        name: 'Mechanical Keyboard',
62        category: 'Electronics',
63        price: 89.99,
64        stock: 15,
65        status: 'LOWSTOCK',
66        rating: 4.7,
67    },
68    {
69        id: '1003',
70        code: 'p1003',
71        name: 'Office Chair',
72        category: 'Furniture',
73        price: 199,
74        stock: 0,
75        status: 'OUTOFSTOCK',
76        rating: 4.1,
77    },
78    {
79        id: '1004',
80        code: 'p1004',
81        name: 'Noise Cancelling Headphones',
82        category: 'Audio',
83        price: 149.99,
84        stock: 42,
85        status: 'INSTOCK',
86        rating: 4.6,
87    },
88    {
89        id: '1005',
90        code: 'p1005',
91        name: 'Smart Watch',
92        category: 'Wearables',
93        price: 179.99,
94        stock: 8,
95        status: 'LOWSTOCK',
96        rating: 4.4,
97    },
98    {
99        id: '1006',
100        code: 'p1006',
101        name: 'Laptop Stand',
102        category: 'Accessories',
103        price: 39.99,
104        stock: 65,
105        status: 'INSTOCK',
106        rating: 4.2,
107    },
108    {
109        id: '1007',
110        code: 'p1007',
111        name: 'USB-C Hub',
112        category: 'Accessories',
113        price: 49.99,
114        stock: 0,
115        status: 'OUTOFSTOCK',
116        rating: 4.0,
117    },
118]
119
120export function DataTableGridStripedRow() {
121    const [size, setSize] = React.useState<'small' | 'normal' | 'large'>(
122        'normal',
123    )
124
125    const header = (
126        <div className="flex w-full items-center justify-between">
127            <h4 className="text-lg font-semibold">Products</h4>
128        </div>
129    )
130
131    const footer = (
132        <span>
133            In total there are <strong>{data.length}</strong> products.
134        </span>
135    )
136
137    return (
138        <div className="space-y-6">
139            <div className="flex items-center justify-center gap-2">
140                <Button
141                    variant={size === 'small' ? 'primary' : 'outline'}
142                    size="sm"
143                    onClick={() => setSize('small')}
144                >
145                    Small
146                </Button>
147                <Button
148                    variant={size === 'normal' ? 'primary' : 'outline'}
149                    size="sm"
150                    onClick={() => setSize('normal')}
151                >
152                    Normal
153                </Button>
154                <Button
155                    variant={size === 'large' ? 'primary' : 'outline'}
156                    size="sm"
157                    onClick={() => setSize('large')}
158                >
159                    Large
160                </Button>
161            </div>
162            <DataTable
163                columns={columns}
164                data={data}
165                footer={footer}
166                size={size}
167                showGridLines
168                stripedRows
169            />
170        </div>
171    )
172}
173