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

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 :

npm install react react-dom antd

🎯 Utilisation de base

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

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

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

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

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

Actions personnalisées

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

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

🛠️ Développement

# 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 : [[email protected]]

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