Next.js Table

Modern, esnek ve özelleştirilebilir React table komponenti. Next.js projeleri için tasarlanmış, Tailwind CSS ile stillendirilmiş.

✨ Özellikler

• 🎯 Modüler Yapı - Compound Component Pattern
• 💎 TypeScript Desteği - Tam tip güvenliği
• 🎨 Tailwind CSS - Modern ve responsive tasarım
• 🔧 Tamamen Özelleştirilebilir - Her component için className desteği
• 📦 Zero Dependencies - Sadece React ve clsx
• 🚀 Next.js Ready - SSR/SSG destekli

🚀 Kurulum

npm install nextjs-table
# veya
yarn add nextjs-table
# veya
pnpm add nextjs-table

💡 Kullanım

Basit Kullanım

import { Table } from 'nextjs-table';

function UserTable({ users }) {
  return (
    <Table>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>İsim</Table.HeaderCell>
          <Table.HeaderCell>Email</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      
      <Table.Body>
        {users.map((user) => (
          <Table.Row key={user.id}>
            <Table.Cell>{user.name}</Table.Cell>
            <Table.Cell>{user.email}</Table.Cell>
            <Table.Cell>
              <span className="badge">{user.status}</span>
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
}

Boş Durum

<Table.Body>
  {data.length === 0 ? (
    <Table.Empty colSpan={3}>
      <div className="py-8 text-center">
        <p>Henüz veri bulunmuyor</p>
      </div>
    </Table.Empty>
  ) : (
    data.map(item => (
      <Table.Row key={item.id}>
        {/* ... */}
      </Table.Row>
    ))
  )}
</Table.Body>

Footer ile Kullanım

<Table>
  <Table.Header>
    {/* header cells */}
  </Table.Header>
  
  <Table.Body>
    {/* data rows */}
  </Table.Body>
  
  <Table.Footer>
    <Table.Row>
      <Table.HeaderCell>Toplam</Table.HeaderCell>
      <Table.HeaderCell>100</Table.HeaderCell>
    </Table.Row>
  </Table.Footer>
</Table>

🧩 Componentler

Table

Ana wrapper component. Overflow handling ve temel table styling'i sağlar.

<Table className="custom-table">
  {/* children */}
</Table>

Table.Header / TableHeader

<thead> elementi için wrapper.

Table.Body / TableBody

<tbody> elementi için wrapper.

Table.Footer / TableFooter

<tfoot> elementi için wrapper.

Table.Row / TableRow

<tr> elementi için wrapper. Hover efekti içerir.

Table.HeaderCell / TableHeaderCell

<th> elementi için wrapper. Header cell styling'i ile gelir.

Table.Cell / TableCell

<td> elementi için wrapper.

Props:

• colSpan?: number - Hücrenin kaç sütun kaplayacağı

Table.Empty / TableEmpty

Boş durum için özel component.

Props:

• colSpan: number - Toplam sütun sayısı
• children: React.ReactNode - Gösterilecek içerik

🎨 Styling

Tüm componentler Tailwind CSS classları kabul eder:

<Table className="shadow-lg border border-gray-200">
  <Table.Header className="bg-blue-50">
    <Table.Row className="border-b-2">
      <Table.HeaderCell className="text-blue-900 font-bold">
        Başlık
      </Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  
  <Table.Body>
    <Table.Row className="hover:bg-yellow-50">
      <Table.Cell className="text-gray-800 font-medium">
        İçerik
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

🔧 TypeScript

Tüm componentler TypeScript ile yazılmış ve tam tip desteği sunar:

interface User {
  id: number;
  name: string;
  email: string;
}

// Tip güvenli kullanım
const users: User[] = [...];

<Table.Body>
  {users.map((user: User) => (
    <Table.Row key={user.id}>
      <Table.Cell>{user.name}</Table.Cell>
      <Table.Cell>{user.email}</Table.Cell>
    </Table.Row>
  ))}
</Table.Body>

📦 Export Türleri

// Compound component (önerilen)
import { Table } from 'nextjs-table';
<Table.Header>...</Table.Header>

// Named imports
import { Table, TableHeader, TableCell } from 'nextjs-table';

// Default import
import Table from 'nextjs-table';

👨‍💻 Geliştirici

Kenan Gündoğan - Full Stack Developer

🤝 Katkıda Bulunma

1. Fork edin
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Commit yapın (git commit -m 'Add amazing feature')
4. Push edin (git push origin feature/amazing-feature)
5. Pull Request oluşturun

📄 Lisans

MIT

🔗 Linkler

• GitHub Repository
• NPM Package
• Issues