جدول داده (DataTable)

import { DataTable } from '@partodata/ui'

import { DataTable, type DataTableColumn } from '@partodata/ui'

interface Influencer {
  id: number
  name: string
  followers: number
  engagementRate: number
}

const columns: DataTableColumn<Influencer>[] = [
  { id: 'name', header: 'نام', cell: (row) => row.name },
  {
    id: 'followers',
    header: 'دنبال‌کننده‌ها',
    cell: (row) => row.followers.toLocaleString('en-US'),
    align: 'end',
  },
  {
    id: 'engagementRate',
    header: 'نرخ تعامل',
    cell: (row) => `${row.engagementRate}٪`,
    align: 'end',
  },
]

const data: Influencer[] = [
  { id: 1, name: 'محمد رضایی', followers: 125000, engagementRate: 4.2 },
  { id: 2, name: 'سارا احمدی', followers: 89000, engagementRate: 6.8 },
  { id: 3, name: 'علی محمدی', followers: 350000, engagementRate: 2.1 },
]

<DataTable columns={columns} data={data} />

'use client'

import { useState } from 'react'
import { DataTable, type DataTableColumn, type SortDirection } from '@partodata/ui'

function SortableExample() {
  const [sortColumn, setSortColumn] = useState<string | null>(null)
  const [sortDirection, setSortDirection] = useState<SortDirection | null>(null)

  return (
    <DataTable
      columns={columns}
      data={data}
      sort={{
        column: sortColumn,
        direction: sortDirection,
        onSort: (col, dir) => {
          setSortColumn(col)
          setSortDirection(dir)
        },
      }}
    />
  )
}

<DataTable
  columns={columns}
  data={pageData}
  pagination={{
    currentPage: 2,
    totalPages: 10,
    onPageChange: (page) => setCurrentPage(page),
  }}
/>

<DataTable
  columns={columns}
  data={pageData}
  selection={{ selectedRows, onSelectionChange: setSelectedRows, getRowKey: (row) => row.id }}
  pagination={{
    currentPage,
    totalPages,
    onPageChange: setCurrentPage,
    pageSize,
    onPageSizeChange: setPageSize,
    pageSizeOptions: [10, 20, 50, 100],
    totalRows: 1240,
  }}
/>

'use client'

import { useState } from 'react'

function SelectableExample() {
  const [selected, setSelected] = useState<Set<number>>(new Set())

  return (
    <DataTable
      columns={columns}
      data={data}
      selection={{
        selectedRows: selected,
        onSelectionChange: setSelected,
        getRowKey: (row) => row.id,
      }}
    />
  )
}

<DataTable columns={columns} data={[]} isLoading loadingRows={5} />

import { Empty, EmptyIcon, EmptyTitle, EmptyDescription, Button } from '@partodata/ui'
import { SearchX } from 'lucide-react'
;<DataTable
  columns={columns}
  data={[]}
  emptyState={
    <Empty className="border-0">
      <EmptyIcon>
        <SearchX className="size-6" />
      </EmptyIcon>
      <EmptyTitle>اینفلوئنسری یافت نشد</EmptyTitle>
      <EmptyDescription>فیلترهای خود را تغییر دهید یا اینفلوئنسر جدید اضافه کنید</EmptyDescription>
    </Empty>
  }
/>

'use client'

import { useState } from 'react'
import {
  DataTable,
  type DataTableColumn,
  type SortDirection,
  Avatar,
  Badge,
  SocialPlatformBadge,
} from '@partodata/ui'

function FullExample() {
  const [page, setPage] = useState(1)
  const [sortCol, setSortCol] = useState<string | null>(null)
  const [sortDir, setSortDir] = useState<SortDirection | null>(null)
  const [selected, setSelected] = useState<Set<number>>(new Set())

  const columns: DataTableColumn<Influencer>[] = [
    {
      id: 'name',
      header: 'نام',
      sortable: true,
      cell: (row) => (
        <div className="flex items-center gap-2">
          <Avatar src={row.avatar} fallback={row.name[0]} size="sm" />
          <span className="font-medium">{row.name}</span>
        </div>
      ),
    },
    {
      id: 'platform',
      header: 'پلتفرم',
      cell: (row) => <SocialPlatformBadge platform={row.platform} size="sm" />,
    },
    {
      id: 'followers',
      header: 'دنبال‌کننده‌ها',
      sortable: true,
      align: 'end',
      cell: (row) => row.followers.toLocaleString('en-US'),
    },
    {
      id: 'status',
      header: 'وضعیت',
      cell: (row) => (
        <Badge variant={row.active ? 'success' : 'default'} size="sm">
          {row.active ? 'فعال' : 'غیرفعال'}
        </Badge>
      ),
    },
  ]

  return (
    <DataTable
      columns={columns}
      data={influencers}
      size="sm"
      striped
      sort={{
        column: sortCol,
        direction: sortDir,
        onSort: (col, dir) => {
          setSortCol(col)
          setSortDir(dir)
        },
      }}
      selection={{
        selectedRows: selected,
        onSelectionChange: setSelected,
        getRowKey: (row) => row.id,
      }}
      pagination={{
        currentPage: page,
        totalPages: 12,
        onPageChange: setPage,
      }}
      resultCount="۱۴۲ اینفلوئنسر"
    />
  )
}

<DataTable columns={columns} data={campaigns} onRowClick={(row) => router.push(`/campaigns/${row.id}`)} />

'use client'
import { DataTable, DataTableFacetedFilter } from '@partodata/ui'

const [platforms, setPlatforms] = useState<string[]>([])

<DataTableFacetedFilter
  title="پلتفرم"
  options={[
    { value: 'instagram', label: 'اینستاگرام' },
    { value: 'telegram', label: 'تلگرام' },
    { value: 'x', label: 'ایکس' },
  ]}
  selected={platforms}
  onSelectedChange={setPlatforms}
  facets={{ instagram: 1240, telegram: 87, x: 12 }}
/>

'use client'
import {
  DataTable,
  DataTableFacetedFilter,
  DataTableColumnVisibilityToggle,
  DataTableExportButton,
  FilterBar,
  FilterBarRow,
  FilterBarActions,
  FilterBarClear,
  SearchInput,
  useDebounce,
} from '@partodata/ui'

const [query, setQuery] = useState('')
const debouncedQuery = useDebounce(query, 300)
const [platforms, setPlatforms] = useState<string[]>([])
const [visible, setVisible] = useState({})
const hasFilters = !!query || platforms.length > 0

// در محصول واقعی، debouncedQuery و platforms را به سرور می‌فرستید
// و سرور صفحه‌ی نتایج + facetها را برمی‌گرداند.

;<FilterBar>
  <FilterBarRow>
    <SearchInput
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      onClear={() => setQuery('')}
      placeholder="جست‌وجوی نام"
      wrapperClassName="w-44"
    />
    <DataTableFacetedFilter
      title="پلتفرم"
      options={platformOptions}
      selected={platforms}
      onSelectedChange={setPlatforms}
      facets={facetCounts}
    />
    {hasFilters && (
      <FilterBarClear
        onClear={() => {
          setQuery('')
          setPlatforms([])
        }}
      />
    )}
    <FilterBarActions>
      <DataTableColumnVisibilityToggle columns={columns} visibility={{ visible, onVisibilityChange: setVisible }} />
      <DataTableExportButton columns={columns} data={rows} filename="influencers.csv" />
    </FilterBarActions>
  </FilterBarRow>

  <DataTable columns={columns} data={rows} columnVisibility={{ visible, onVisibilityChange: setVisible }} />
</FilterBar>

'use client'
import {
  DataTable,
  DataTableColumnVisibilityToggle,
  DataTableExportButton,
} from '@partodata/ui'

const [visibility, setVisibility] = useState({})
const [expandedRows, setExpandedRows] = useState(new Set<number>())

<div className="flex items-center justify-end gap-2">
  <DataTableColumnVisibilityToggle
    columns={columns}
    visibility={{ visible: visibility, onVisibilityChange: setVisibility }}
  />
  <DataTableExportButton columns={columns} data={rows} filename="pages.csv" />
</div>

<DataTable
  columns={[
    { id: 'name', header: 'نام', cell: (r) => r.name, pinned: 'start', width: 200 },
    { id: 'engagement', header: 'تعامل', cell: (r) => r.engagement },
    { id: 'notes', header: 'یادداشت', cell: (r) => r.notes, defaultVisible: false },
  ]}
  data={rows}
  columnVisibility={{ visible: visibility, onVisibilityChange: setVisibility }}
  expansion={{
    expandedRows,
    onExpandedRowsChange: setExpandedRows,
    renderExpandedRow: (r) => <div className="p-4 text-sm">{r.detailsHtml}</div>,
  }}
/>