nextjs-table/README.md

Modern, customizable data table component for Next.js with CRUD operations

# 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

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

## 💡 Kullanım

### Basit Kullanım

```tsx
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

```tsx
<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

```tsx
<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.

```tsx
<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:

```tsx
<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:

```tsx
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

```tsx
// 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](https://github.com/eglador/nextjs-table)
- [NPM Package](https://www.npmjs.com/package/nextjs-table)
- [Issues](https://github.com/eglador/nextjs-table/issues)