# DataTable Pattern

## COMPONENT: DataTable

```tsx
import { DataTable } from '@/components/ui/DataTable';

<DataTable
  data={users}
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'role', label: 'Role', render: (user) => <Badge>{user.role}</Badge> }
  ]}
  pagination={{ pageSize: 10 }}
  searchable
  onRowClick={(user) => navigate(`/users/${user.id}`)}
/>
```

## COMPONENT: Tooltip

```tsx
import { Tooltip } from '@/components/ui/Tooltip';

// Variants: default, error, warning, success, info
// Positions: top, bottom, left, right

<Tooltip content="Permission required" variant="error">
  <button disabled>Protected action</button>
</Tooltip>
```

### Disabled Button with Explanation Pattern
```tsx
const canExecute = hasPermission('module.action.execute');
<Tooltip content={!canExecute ? t('errors.noPermission') : undefined} variant="error" disabled={canExecute}>
  <button disabled={!canExecute}>Action</button>
</Tooltip>
```
