npm package: @radiscode/custom-ant-helper
Description: Composants Ant Design personnalisés réutilisables
Author: Arouna
Latest version: 1.0.28

# Custom Ant Table

Une table personnalisée puissante et flexible basée sur Ant Design avec des fonctionnalités avancées d'édition en ligne, recherche, pagination et résumés.

## 🚀 Fonctionnalités

- ✨ **Édition en ligne** - Éditez les cellules directement dans la table
- 🔍 **Recherche avancée** - Recherche globale et filtres par colonne
- 📊 **Résumés automatiques** - Calcul automatique des totaux
- 📱 **Responsive** - S'adapte à différentes tailles d'écran
- 🎨 **Personnalisable** - Styles et comportements configurables
- 🔧 **TypeScript** - Support complet de TypeScript
- ⚡ **Performance optimisée** - Rendu optimisé avec React.memo

## 📦 Installation

```bash
npm install @your-org/custom-ant-table
# ou
yarn add @your-org/custom-ant-table
# ou
pnpm add @your-org/custom-ant-table
```

### Dépendances pair

Assurez-vous d'avoir installé les dépendances suivantes :

```bash
npm install react react-dom antd
```

## 🎯 Utilisation de base

```jsx
import React from 'react';
import { CustomAntTable } from '@your-org/custom-ant-table';
import '@your-org/custom-ant-table/dist/index.css';

const App = () => {
  const columns = [
    {
      key: 'name',
      dataIndex: 'name',
      title: 'Nom',
      advancedSearch: true,
    },
    {
      key: 'age',
      dataIndex: 'age',
      title: 'Âge',
      align: 'center',
    },
    {
      key: 'amount',
      dataIndex: 'amount',
      title: 'Montant',
      align: 'right',
      summable: true,
      render: (value) => `${value} €`,
    },
  ];

  const data = [
    { id: 1, name: 'John Doe', age: 32, amount: 1000 },
    { id: 2, name: 'Jane Smith', age: 28, amount: 2000 },
  ];

  return (
    <CustomAntTable
      rowKey="id"
      title="Liste des utilisateurs"
      data={data}
      columns={columns}
      showSummary
    />
  );
};

export default App;
```

## 📖 API

### Props principales

| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `data` | `any[]` | **requis** | Les données à afficher |
| `columns` | `ColumnProps[]` | **requis** | Configuration des colonnes |
| `rowKey` | `string` | `'id'` | Clé unique pour chaque ligne |
| `title` | `string` | - | Titre de la table |
| `showSearch` | `boolean` | `true` | Afficher la barre de recherche |
| `showSummary` | `boolean` | `false` | Afficher les totaux |
| `applyPagination` | `boolean` | `true` | Activer la pagination |
| `loading` | `boolean` | `false` | État de chargement |
| `onRowSelected` | `(record) => void` | - | Callback au double-clic |
| `onSave` | `(record) => void` | - | Callback à la sauvegarde |

### Configuration des colonnes

```typescript
interface ColumnProps {
  key: string;
  dataIndex: string | string[];
  title: string;
  align?: 'left' | 'center' | 'right';
  advancedSearch?: boolean;
  fixed?: 'left' | 'right';
  summable?: boolean;
  editable?: boolean;
  inputType?: 'TEXT' | 'DATE' | 'SELECT' | 'INPUT_NUMBER';
  render?: (value: any, record: any) => ReactNode;
}
```

## 🎨 Exemples avancés

### Édition en ligne

```jsx
const columns = [
  {
    key: 'name',
    dataIndex: 'name',
    title: 'Nom',
    editable: true,
    required: true,
    inputType: 'TEXT',
  },
  {
    key: 'birthdate',
    dataIndex: 'birthdate',
    title: 'Date de naissance',
    editable: true,
    inputType: 'DATE',
  },
];

const handleSave = (record) => {
  console.log('Données sauvegardées:', record);
  // Logique de sauvegarde
};

<CustomAntTable
  columns={columns}
  data={data}
  onSave={handleSave}
/>
```

### Sélection de lignes

```jsx
const [selectedRows, setSelectedRows] = useState([]);

<CustomAntTable
  columns={columns}
  data={data}
  onSelectedRowKeys={({ keys, rows }) => {
    setSelectedRows(rows);
  }}
/>
```

### Actions personnalisées

```jsx
const actions = [
  {
    label: 'Exporter',
    icon: <ExportOutlined />,
    onClick: () => console.log('Export'),
  },
];

<CustomAntTable
  columns={columns}
  data={data}
  actions={actions}
  showMoreActions
/>
```

## 🛠️ Développement

```bash
# Cloner le repo
git clone https://github.com/your-username/custom-ant-table.git

# Installer les dépendances
npm install

# Build
npm run build

# Watch mode
npm run build:watch

# Lint
npm run lint

# Format
npm run format
```

## 📝 License

MIT © [Your Name]

## 🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.

## 📧 Contact

Pour toute question : [your.email@example.com]

---

Made with ❤️ using React and Ant Design


Local use:

Methode 1: 
in libraire
npm run build
npm pack
This will generate an .tgz file
In your app do: npm install /path/to/your/librairie/name.tgz

Methode 2:
In the libraire: npm link
Int your app: npm link librairie_name

To desinstall
In the libraire: npm unlink
Int your app: npm unlink librairie_name