Custom Ant Design Table

🎨 A fully customizable Ant Design table component compatible with React.js and Next.js

✨ Overview

Custom Ant Design Table provides an enhanced table component with superior flexibility for styling, sorting, filtering, and pagination. Built with performance and customization in mind, it seamlessly integrates with your React and Next.js applications.

🚀 Features

• Framework Compatibility: Fully supports React.js and Next.js environments
• Customization: Extensive styling options and theming capabilities
• Built-in Functionality: Integrated sorting, filtering, and pagination
• Performance: Lightweight and optimized for efficient rendering
• Type Safety: Written in TypeScript for better development experience

📦 Installation

Choose your preferred package manager:

Using npm:

npm install ramailocustomtable antd

Using yarn:

yarn add ramailocustomtable antd

📌 Usage

Basic Example

import React from "react";
import { CustomTable } from "ramailocustomtable";

const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "address" },
];

const data = [
  { key: "1", name: "John Doe", age: 32, address: "New York" },
  { key: "2", name: "Jane Smith", age: 28, address: "London" },
  { key: "3", name: "Sam Wilson", age: 40, address: "Paris" },
];

const App = () => {
  return (
    <div style={{ padding: "20px" }}>
      <h2>Custom Ant Design Table</h2>
      <CustomTable
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 2 }}
      />
    </div>
  );
};

export default App;

🎨 Customization

The component accepts various props for enhanced customization:

<CustomTable
  columns={columns}
  dataSource={data}
  pagination={{ pageSize: 2 }}
  rowClassName={(record, index) => (index % 2 === 0 ? "bg-gray-100" : "")}
  customStyles={{ border: "2px solid blue" }}
/>

🛠 Development

Setup and Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

📚 Resources

• Example Repository: GitHub - CustomTable
• Documentation: GitHub - CustomTable
• UI Styling: add an external style sheet

/* customTableStyles.css */
th.ant-table-cell {
  background-color: red !important; /*header color*/
  color: white !important;
}
.ant-pagination-item-link {
  /*Pagination arrow*/
  color: red !important;
}
.ant-pagination .ant-pagination-item-active {
  /* pagination active item color */
  border-color: red !important;
}
.ant-pagination-item-active a {
  /* pagination active item color */
  color: red !important;
}

👥 Contributors

• Developer: Md Maaz Ahmad
• Organization: Ramailo Technology