1. Components
  2. table

Table

Structured rows and columns with sorting or filtering.

IntentUI

Demo

ID
Name
Title
Email
1John DoeAdminjohndow@gmail.com
2John DoeAdminjohndow@gmail.com
3John DoeAdminjohndow@gmail.com
4John DoeAdminjohndow@gmail.com
import { Table, TableColumn, TableColumns, TableRow, TableRows, TableCell } from "@/components/jk/table"

const users = [
    {
        id: 1,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 2,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 3,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 4,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
]

export const DemoTable = () => {
    return (
        <Table>
            <TableColumns >
                <TableColumn className="whitespace-nowrap [--gutter-x:--spacing(2)]">
                    ID
                </TableColumn>
                <TableColumn isRowHeader>
                    Name
                </TableColumn>
                <TableColumn>
                    Title
                </TableColumn>
                <TableColumn>
                    Email
                </TableColumn>
            </TableColumns>
            <TableRows items={users}>
                {
                    (user)=><TableRow key={user.id}>
                        <TableCell className="whitespace-nowrap [--gutter-x:--spacing(2)]">
                            {user.id}
                        </TableCell>
                        <TableCell className="whitespace-nowrap">
                            {user.name}
                        </TableCell>
                        <TableCell>
                            {user.title}
                        </TableCell>
                        <TableCell>
                            {user.email}
                        </TableCell>
                    </TableRow>
                }
            </TableRows>
        </Table>
    )
}

Installation

terminal
npx shadcn@latest add @jk-ui/table

Examples

Hoverable Striped

ID
Name
Title
Email
1John DoeAdminjohndow@gmail.com
2John DoeAdminjohndow@gmail.com
3John DoeAdminjohndow@gmail.com
import { Button } from "@/components/jk/button"
import { Table, TableColumn, TableColumns, TableRow, TableRows, TableCell } from "@/components/jk/table"



const users = [
    {
        id: 1,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 2,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 3,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 4,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
]

export const TableHoverableStriped = () => {
    return (
        <Table hoverable striped>
            <TableColumns>
                <TableColumn>
                    ID
                </TableColumn>
                <TableColumn isRowHeader>
                    Name
                </TableColumn>
                <TableColumn>
                    Title
                </TableColumn>
                <TableColumn>
                    Email
                </TableColumn>
                <TableColumn />
            </TableColumns>
            <TableRows items={users}>
                {
                    (user) => <TableRow key={user.id} >
                        <TableCell className="whitespace-nowrap">
                            {user.id}
                        </TableCell>
                        <TableCell>
                            {user.name}
                        </TableCell>
                        <TableCell>
                            {user.title}
                        </TableCell>
                        <TableCell>
                            {user.email}
                        </TableCell>
                        <TableCell>
                            <div className="w-full flex justify-end items-center gap-2 min-w-max">
                                <Button size="xs" iconOnly variant="ghost" intent="ghost-primary">
                                    <span aria-hidden="true" className="flex iconify ph--pen"></span>
                                </Button>
                                <Button size="xs" iconOnly variant='ghost' intent='ghost-danger'>
                                    <span aria-hidden="true" className="flex iconify ph--trash"></span>
                                </Button>
                            </div>
                        </TableCell>
                    </TableRow>
                }
            </TableRows>
        </Table>
    )
}

Grid

#
Name
Title
Email
1John DoeAdminjohndow@gmail.com
2John DoeAdminjohndow@gmail.com
3John DoeAdminjohndow@gmail.com
4John DoeAdminjohndow@gmail.com
import { Table, TableColumn, TableColumns, TableRow, TableRows, TableCell } from "@/components/jk/table"

const users = [
    {
        id: 1,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 2,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 3,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
    {
        id: 4,
        name: 'John Doe',
        title: 'Admin',
        email: 'johndow@gmail.com',
    },
]

export const TableGrid = () => {
    return (
        <Table grid>
            <TableColumns >
                <TableColumn className="whitespace-nowrap [--gutter-x:--spacing(2)]">
                    ID
                </TableColumn>
                <TableColumn isRowHeader>
                    Name
                </TableColumn>
                <TableColumn>
                    Title
                </TableColumn>
                <TableColumn>
                    Email
                </TableColumn>
            </TableColumns>
            <TableRows items={users}>
                {
                    (user) => <TableRow key={user.id}>
                        <TableCell className="whitespace-nowrap [--gutter-x:--spacing(2)]">
                            {user.id}
                        </TableCell>
                        <TableCell className="whitespace-nowrap">
                            {user.name}
                        </TableCell>
                        <TableCell>
                            {user.title}
                        </TableCell>
                        <TableCell>
                            {user.email}
                        </TableCell>
                    </TableRow>
                }
            </TableRows>
        </Table>
    )
}
Prev
Alert

Contextual feedback messages for success, info, warning, or error.

Next
On this page