DataTable

'use client';

import { formatDate, formatMoney } from '@akhatmirzo/core';
import { Badge, Button, DataTable, toast, type DataTableColumn } from '@akhatmirzo/ui';
import { Plus } from 'lucide-react';

type Status = 'paid' | 'pending' | 'shipped' | 'cancelled';

interface Order {
  id: number;
  customer: string;
  region: string;
  date: Date;
  status: Status;
  total: number;
}

const STATUS = {
  paid: { label: "To'langan", color: 'success' },
  pending: { label: 'Kutilmoqda', color: 'warning' },
  shipped: { label: "Yo'lda", color: 'info' },
  cancelled: { label: 'Bekor qilingan', color: 'danger' },
} as const;

const NAMES = [
  'Jasur Karimov',
  'Malika Rahimova',
  "Bekzod G'aniyev",
  'Nodira Saidova',
  'Aziz Normatov',
];
const REGIONS = ['Toshkent', 'Samarqand', 'Buxoro', "Farg'ona", 'Xorazm'];
const STATUSES = Object.keys(STATUS) as Status[];

const orders: Order[] = Array.from({ length: 48 }, (_, i) => ({
  id: 1042 + i,
  customer: NAMES[(i * 3) % NAMES.length]!,
  region: REGIONS[(i * 7) % REGIONS.length]!,
  date: new Date(2026, 9, 21 - (i % 30)),
  status: STATUSES[(i * 5 + (i >> 2)) % 4]!,
  total: 85_000 + ((i * 377_311) % 4_800_000),
}));

const columns: DataTableColumn<Order>[] = [
  { key: 'id', header: '№', width: 88, sortable: true, cell: (o) => `#${o.id}` },
  { key: 'customer', header: 'Mijoz', sortable: true },
  { key: 'region', header: 'Viloyat', sortable: true, filter: 'select' },
  { key: 'date', header: 'Sana', sortable: true, cell: (o) => formatDate(o.date) },
  {
    key: 'status',
    header: 'Holat',
    filter: 'multiselect',
    filterOptions: STATUSES.map((s) => ({ value: s, label: STATUS[s].label })),
    searchValue: (o) => STATUS[o.status].label,
    cell: (o) => (
      <Badge dot color={STATUS[o.status].color}>
        {STATUS[o.status].label}
      </Badge>
    ),
  },
  {
    key: 'total',
    header: 'Summa',
    numeric: true,
    sortable: true,
    cell: (o) => formatMoney(o.total),
  },
];

export default function DataTableBasic() {
  return (
    <DataTable
      label="Buyurtmalar"
      data={orders}
      columns={columns}
      searchable
      pagination={{ pageSize: 5, pageSizeOptions: [5, 10, 25] }}
      className="w-full"
      toolbar={
        <Button variant="primary" leftIcon={<Plus />} onClick={() => toast('Yangi buyurtma')}>
          Qo'shish
        </Button>
      }
    />
  );
}

'use client';

import { formatDate, formatMoney } from '@akhatmirzo/core';
import { DataTable, type DataTableColumn } from '@akhatmirzo/ui';

interface Payment {
  id: number;
  client: string;
  method: string;
  region: string;
  date: Date;
  amount: number;
}

const METHODS = ['Click', 'Payme', 'Uzcard', 'Naqd'];
const REGIONS = ['Toshkent', 'Samarqand', 'Andijon', 'Namangan'];
const CLIENTS = ['Dilnoza Yusupova', 'Otabek Qodirov', 'Shahnoza Ergasheva', 'Rustam Xolmatov'];

const payments: Payment[] = Array.from({ length: 40 }, (_, i) => ({
  id: 501 + i,
  client: CLIENTS[(i * 3) % CLIENTS.length]!,
  method: METHODS[(i * 5) % METHODS.length]!,
  region: REGIONS[(i + (i >> 2)) % REGIONS.length]!,
  date: new Date(2026, 9, 25 - i),
  amount: 50_000 + ((i * 213_457) % 3_000_000),
}));

const columns: DataTableColumn<Payment>[] = [
  { key: 'id', header: '№', width: 72, cell: (p) => `#${p.id}` },
  { key: 'client', header: 'Mijoz' },
  { key: 'method', header: "To'lov turi", filter: 'select' },
  { key: 'region', header: 'Viloyat', filter: 'multiselect' },
  { key: 'date', header: 'Sana', filter: 'date', sortable: true, cell: (p) => formatDate(p.date) },
  {
    key: 'amount',
    header: 'Summa',
    numeric: true,
    sortable: true,
    filter: 'range',
    cell: (p) => formatMoney(p.amount),
  },
];

export default function DataTableFilters() {
  return (
    <DataTable
      label="To'lovlar"
      data={payments}
      columns={columns}
      searchable
      pagination={{ pageSize: 5 }}
      initialState={{ filters: { method: 'Click' } }}
      className="w-full"
    />
  );
}

'use client';

import {
  DataTable,
  DropdownMenu,
  IconButton,
  toast,
  type DataTableColumn,
  Button,
} from '@akhatmirzo/ui';
import { Download, Ellipsis, Eye, Trash2 } from 'lucide-react';
import { useState } from 'react';

interface Product {
  id: string;
  name: string;
  sku: string;
  stock: number;
}

const initial: Product[] = [
  { id: 'p1', name: "Paxta ko'ylak", sku: 'KY-001', stock: 42 },
  { id: 'p2', name: "Atlas ro'mol", sku: 'RM-014', stock: 8 },
  { id: 'p3', name: 'Choynak (1.5 l)', sku: 'CH-203', stock: 0 },
  { id: 'p4', name: "Do'ppi", sku: 'DP-077', stock: 120 },
  { id: 'p5', name: 'Sopol lagan', sku: 'LG-310', stock: 15 },
];

const columns: DataTableColumn<Product>[] = [
  { key: 'name', header: 'Mahsulot', sortable: true },
  { key: 'sku', header: 'Artikul' },
  { key: 'stock', header: 'Qoldiq', numeric: true, sortable: true },
];

export default function DataTableSelection() {
  const [products, setProducts] = useState(initial);
  const remove = (ids: string[]) => setProducts((prev) => prev.filter((p) => !ids.includes(p.id)));

  return (
    <DataTable
      label="Mahsulotlar"
      data={products}
      columns={columns}
      selectable
      className="w-full"
      onRowClick={(p) => toast(`${p.name} ochildi`)}
      bulkActions={(rows, clear) => (
        <>
          <Button
            variant="outline"
            size="sm"
            leftIcon={<Download />}
            onClick={() => toast(`${rows.length} ta eksport qilindi`)}
          >
            Eksport
          </Button>
          <Button
            variant="danger"
            size="sm"
            leftIcon={<Trash2 />}
            onClick={() => {
              remove(rows.map((r) => r.id));
              clear();
            }}
          >
            O'chirish
          </Button>
        </>
      )}
      rowActions={(p) => (
        <DropdownMenu>
          <DropdownMenu.Trigger asChild>
            <IconButton variant="ghost" size="sm" aria-label={`${p.name}: amallar`}>
              <Ellipsis />
            </IconButton>
          </DropdownMenu.Trigger>
          <DropdownMenu.Content align="end">
            <DropdownMenu.Item icon={<Eye />} onSelect={() => toast(p.name)}>
              Ko'rish
            </DropdownMenu.Item>
            <DropdownMenu.Item variant="danger" icon={<Trash2 />} onSelect={() => remove([p.id])}>
              O'chirish
            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu>
      )}
    />
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { Button, DataTable, type DataTableColumn } from '@akhatmirzo/ui';
import { Inbox, Plus } from 'lucide-react';
import { useState } from 'react';

interface Order {
  id: number;
  customer: string;
  total: number;
}

const orders: Order[] = [
  { id: 1042, customer: 'Jasur Karimov', total: 1_250_000 },
  { id: 1043, customer: 'Malika Rahimova', total: 480_000 },
  { id: 1044, customer: 'Aziz Normatov', total: 2_730_000 },
];

const columns: DataTableColumn<Order>[] = [
  { key: 'id', header: '№', width: 88 },
  { key: 'customer', header: 'Mijoz' },
  { key: 'total', header: 'Summa', numeric: true, cell: (o) => formatMoney(o.total) },
];

const STATES = {
  data: "Ma'lumot",
  first: 'Birinchi yuklanish',
  refetch: 'Qayta yuklanish',
  empty: "Bo'sh",
  error: 'Xato',
} as const;

type State = keyof typeof STATES;

export default function DataTableStates() {
  const [state, setState] = useState<State>('first');

  return (
    <div className="flex w-full flex-col gap-4">
      <div className="flex flex-wrap gap-2">
        {(Object.keys(STATES) as State[]).map((s) => (
          <Button
            key={s}
            size="sm"
            variant={s === state ? 'primary' : 'outline'}
            aria-pressed={s === state}
            onClick={() => setState(s)}
          >
            {STATES[s]}
          </Button>
        ))}
      </div>
      <DataTable
        label="Holatlar"
        data={state === 'data' || state === 'refetch' ? orders : []}
        columns={columns}
        columnToggle={false}
        loading={state === 'first' || state === 'refetch'}
        error={
          state === 'error' ? 'Server javob bermadi. Internet aloqasini tekshiring.' : undefined
        }
        onRetry={() => setState('data')}
        empty={{
          icon: <Inbox />,
          title: "Hali buyurtmalar yo'q",
          description: "Birinchi buyurtmani qo'shing — u shu yerda ko'rinadi.",
          action: (
            <Button size="sm" variant="primary" leftIcon={<Plus />}>
              Buyurtma qo'shish
            </Button>
          ),
        }}
      />
    </div>
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { DataTable, type DataTableColumn, type DataTableState } from '@akhatmirzo/ui';
import { useEffect, useState } from 'react';

interface Order {
  id: number;
  customer: string;
  total: number;
}

interface Page {
  rows: Order[];
  total: number;
}

const NAMES = ['Jasur Karimov', 'Malika Rahimova', 'Nodira Saidova', 'Otabek Qodirov'];
const DB: Order[] = Array.from({ length: 137 }, (_, i) => ({
  id: 2001 + i,
  customer: NAMES[i % NAMES.length]!,
  total: 90_000 + ((i * 271_828) % 3_500_000),
}));

/** "Server": qidiradi, saralaydi, sahifalaydi. Haqiqiy loyihada — fetch('/api/orders?...') */
function fetchOrders({ search, sorting, pagination }: DataTableState): Promise<Page> {
  let rows = DB.filter((o) => o.customer.toLowerCase().includes(search.toLowerCase()));
  const sort = sorting[0];
  if (sort) {
    const key = sort.id as keyof Order;
    rows = [...rows].sort((a, b) => (a[key] > b[key] ? 1 : -1) * (sort.desc ? -1 : 1));
  }
  const start = pagination.pageIndex * pagination.pageSize;
  const page = { rows: rows.slice(start, start + pagination.pageSize), total: rows.length };
  return new Promise((resolve) => setTimeout(() => resolve(page), 600));
}

const columns: DataTableColumn<Order>[] = [
  { key: 'id', header: '№', width: 88, sortable: true },
  { key: 'customer', header: 'Mijoz', sortable: true },
  {
    key: 'total',
    header: 'Summa',
    numeric: true,
    sortable: true,
    cell: (o) => formatMoney(o.total),
  },
];

export default function DataTableServer() {
  const [query, setQuery] = useState<DataTableState>({
    sorting: [],
    search: '',
    filters: {},
    pagination: { pageIndex: 0, pageSize: 10 },
  });
  const [result, setResult] = useState<Page>({ rows: [], total: 0 });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let active = true;
    fetchOrders(query).then((page) => {
      if (!active) return;
      setResult(page);
      setLoading(false);
    });
    return () => {
      active = false;
    };
  }, [query]);

  return (
    <DataTable
      label="Server buyurtmalari"
      data={result.rows}
      rowCount={result.total}
      columns={columns}
      manual
      searchable
      pagination={{ pageSize: 10 }}
      loading={loading}
      onStateChange={(state) => {
        setLoading(true);
        setQuery(state);
      }}
      className="w-full"
    />
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { DataTable, type DataTableColumn } from '@akhatmirzo/ui';
import { useMemo } from 'react';

interface Order {
  id: number;
  customer: string;
  region: string;
  total: number;
}

const NAMES = ['Jasur Karimov', 'Malika Rahimova', 'Farhod Tursunov', 'Mohira Nazarova'];
const REGIONS = ['Toshkent', 'Samarqand', 'Buxoro', 'Navoiy', 'Xorazm'];

const columns: DataTableColumn<Order>[] = [
  { key: 'id', header: '№', width: 96, sortable: true },
  { key: 'customer', header: 'Mijoz', sortable: true },
  { key: 'region', header: 'Viloyat', filter: 'select' },
  {
    key: 'total',
    header: 'Summa',
    numeric: true,
    sortable: true,
    cell: (o) => formatMoney(o.total),
  },
];

export default function DataTableVirtual() {
  const orders = useMemo<Order[]>(
    () =>
      Array.from({ length: 10_000 }, (_, i) => ({
        id: i + 1,
        customer: NAMES[i % NAMES.length]!,
        region: REGIONS[(i * 3) % REGIONS.length]!,
        total: 50_000 + ((i * 377_311) % 4_800_000),
      })),
    [],
  );

  return (
    <DataTable
      label="10 000 buyurtma"
      data={orders}
      columns={columns}
      virtual
      maxHeight={400}
      density="compact"
      searchable
      columnToggle={false}
      className="w-full"
    />
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { DataTable, type DataTableColumn } from '@akhatmirzo/ui';

interface Employee {
  id: number;
  name: string;
  position: string;
  department: string;
  phone: string;
  city: string;
  salary: number;
}

const employees: Employee[] = [
  {
    id: 1,
    name: 'Sarvar Abduxoliqov',
    position: 'Frontend dasturchi',
    department: 'IT',
    phone: '+998 90 123 45 67',
    city: 'Toshkent',
    salary: 14_500_000,
  },
  {
    id: 2,
    name: "Gulnora O'rinova",
    position: 'Buxgalter',
    department: 'Moliya',
    phone: '+998 93 555 12 34',
    city: 'Samarqand',
    salary: 9_800_000,
  },
  {
    id: 3,
    name: 'Javohir Ismoilov',
    position: 'Dizayner',
    department: 'Marketing',
    phone: '+998 97 700 00 11',
    city: 'Buxoro',
    salary: 11_200_000,
  },
];

const columns: DataTableColumn<Employee>[] = [
  { key: 'name', header: 'Xodim', width: 200, hideable: false },
  { key: 'position', header: 'Lavozim' },
  { key: 'department', header: "Bo'lim" },
  { key: 'phone', header: 'Telefon', className: 'tabular-nums' },
  { key: 'city', header: 'Shahar', hidden: true },
  { key: 'salary', header: 'Maosh', numeric: true, cell: (e) => formatMoney(e.salary) },
];

export default function DataTableDensity() {
  return (
    <DataTable
      label="Xodimlar"
      data={employees}
      columns={columns}
      density="compact"
      stickyFirstColumn
      selectable
      tableClassName="min-w-[860px]"
      className="w-full"
    />
  );
}

'use client';

import { formatMoney } from '@akhatmirzo/core';
import { DataTable, toast, type DataTableColumn } from '@akhatmirzo/ui';

interface Order {
  id: number;
  customer: string;
  region: string;
  total: number;
}

const orders: Order[] = [
  { id: 1042, customer: 'Jasur Karimov', region: 'Toshkent', total: 1_250_000 },
  { id: 1043, customer: 'Malika Rahimova', region: 'Samarqand', total: 480_000 },
  { id: 1044, customer: 'Aziz Normatov', region: "Farg'ona", total: 2_730_000 },
];

const columns: DataTableColumn<Order>[] = [
  { key: 'id', header: '№' },
  { key: 'customer', header: 'Mijoz' },
  { key: 'region', header: 'Viloyat' },
  { key: 'total', header: 'Summa', numeric: true, cell: (o) => formatMoney(o.total) },
];

export default function DataTableCards() {
  return (
    <DataTable
      label="Buyurtmalar"
      data={orders}
      columns={columns}
      mobileView="cards"
      selectable
      onRowClick={(o) => toast(`Buyurtma #${o.id}`)}
      className="w-full"
    />
  );
}