Table

'use client'

import React from 'react'
import { Table, Thead, Tbody, Tr, Th, Td, Badge } from 'biibaos'

export default function App() {
  return (
    <Table>
      <Thead>
        <Tr>
          <Th>Name</Th>
          <Th>Status</Th>
          <Th>Role</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>Alice Johnson</Td>
          <Td><Badge variant="success" dot>Active</Badge></Td>
          <Td>Designer</Td>
        </Tr>
        <Tr>
          <Td>Bob Smith</Td>
          <Td><Badge variant="secondary" dot>Offline</Badge></Td>
          <Td>Developer</Td>
        </Tr>
      </Tbody>
    </Table>
  )
}

'use client'

import React from 'react'
import { Table, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={20}>
      <Table hover striped>
        <Thead><Tr><Th>Hover & Striped</Th><Th>Value</Th></Tr></Thead>
        <Tbody>
          <Tr><Td>Row 1</Td><Td>100</Td></Tr>
          <Tr><Td>Row 2</Td><Td>200</Td></Tr>
        </Tbody>
      </Table>
      <Table bordered compact>
        <Thead><Tr><Th>Bordered & Compact</Th><Th>Value</Th></Tr></Thead>
        <Tbody>
          <Tr><Td>Small Row</Td><Td>A</Td></Tr>
          <Tr><Td>Small Row</Td><Td>B</Td></Tr>
        </Tbody>
      </Table>
    </Stack>
  )
}

'use client'

import React from 'react'
import { DataTable, Badge } from 'biibaos'

export default function App() {
  const data = [
    { id: 1, name: 'Apple Watch', category: 'Wearables', price: '$399', status: 'In Stock' },
    { id: 2, name: 'iPhone 15', category: 'Phones', price: '$999', status: 'Low Stock' },
    { id: 3, name: 'iPad Pro', category: 'Tablets', price: '$799', status: 'In Stock' },
    { id: 4, name: 'MacBook Air', category: 'Laptops', price: '$1199', status: 'In Stock' },
    { id: 5, name: 'AirPods Pro', category: 'Audio', price: '$249', status: 'Out of Stock' },
  ]

  const columns = [
    { key: 'name', header: 'Product', sortable: true },
    { key: 'category', header: 'Category', sortable: true, width: 140 },
    { key: 'price', header: 'Price', sortable: true, width: 100 },
    {
      key: 'status',
      header: 'Status',
      render: (item) => (
        <Badge variant={item.status === 'In Stock' ? 'success' : item.status === 'Out of Stock' ? 'danger' : 'warning'}>
          {item.status}
        </Badge>
      )
    },
  ]

  return (
    <DataTable 
      data={data} 
      columns={columns} 
      searchable 
      paginated 
    />
  )
}

'use client'

import React from 'react'
import { DataTable, Button, Icon, Badge } from 'biibaos'
import { Plus } from 'lucide-react'

export default function App() {
  const data = [
    { id: 1, name: 'Project A', status: 'Active' },
    { id: 2, name: 'Project B', status: 'Paused' },
  ]

  const columns = [
    { key: 'name', header: 'Project' },
    { 
      key: 'status', 
      header: 'Status',
      render: (item) => <Badge variant={item.status === 'Active' ? 'success' : 'warning'}>{item.status}</Badge>
    },
  ]

  return (
    <DataTable
      data={data}
      columns={columns}
      rightAction={
        <Button size="sm" variant="primary" leftIcon={<Icon icon={Plus} />}>
          Create New
        </Button>
      }
    />
  )
}

'use client'

import React from 'react'
import { DataTable } from 'biibaos'

export default function App() {
  return (
    <DataTable
      isLoading
      data={[]}
      columns={[
        { key: 'name', header: 'Name' },
        { key: 'email', header: 'Email' },
        { key: 'role', header: 'Role' },
      ]}
    />
  )
}

'use client'

import { useState } from 'react'
import { DataTable } from 'biibaos'

export default function App() {
  const [page, setPage] = useState(1)
  
  // Example data for the current page
  const data = [
    { id: 101, name: 'Server Product 1', price: '$99' },
    { id: 102, name: 'Server Product 2', price: '$149' },
  ]

  return (
    <DataTable
      manualPagination
      data={data}
      totalCount={500} // Total items in your database
      currentPage={page}
      pageSize={10}
      onPageChange={(newPage) => setPage(newPage)}
      columns={[
        { key: 'id', header: 'ID' },
        { key: 'name', header: 'Name' },
        { key: 'price', header: 'Price' },
      ]}
    />
  )
}