RamailoTable

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

✨ Overview

RamailoTable 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.

Sample Image

🚀 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 ramailo-ui antd

Using yarn:

yarn add ramailo-ui antd

📌 Usage

Basic Example

import React from "react";
import  {RamailoTable}  from "ramailo-ui";

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>
      <RamailoTable
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 2 }}
      />
    </div>
  );
};

export default App;

🎨 Customization

The component accepts various props for enhanced customization:

<RamailoTable
  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;
}

RamailoTable Documentation

Client-Side Implementation

Overview

A customizable React table component that supports pagination, sorting, and CRUD operations. Built using the ramailo-ui package with Tailwind CSS styling.

Features

• Responsive data table with custom styling
• Client-side sorting for columns
• Pagination with configurable page size
• Action buttons for View/Edit/Delete operations
• Custom row and header styling
• Hover effects and transitions
• Alternating row colors

Installation

npm install ramailo-ui

Usage

1. Import the component:

import  {RamailoTable}  from "ramailo-ui";

2. Define your columns:

const columns = [
  { 
    title: "Name", 
    dataIndex: "name", 
    key: "name",
    sorter: true
  },
  // ... additional columns
];

3. Implement the table:

<RamailoTable
  columns={columns}
  dataSource={data}
  pagination={{
    pageSize: 3,
    showSizeChanger: true,
    showTotal: (total) => `Total ${total} items`,
  }}
  // ... additional props
/>

Styling

The component supports several styling options:

1. Header Styling:

const headerStyle = {
  backgroundColor: "#fce7f3 !important",
  color: "#be185d",
  fontWeight: "600",
  padding: "12px 16px",
};

2. Row Styling:

const rowStyle = (record, index) => ({
  backgroundColor: index % 2 === 0 ? "#ffffff" : "#f9fafb",
  transition: "background-color 0.3s",
});

3. Pagination Styling:

const paginationStyle = {
  ".ant-pagination-item": {
    backgroundColor: "#dcfce7 !important",
    borderColor: "#22c55e",
    color: "#15803d",
  }
  // ... additional pagination styles
};

Server-Side Implementation

Overview

The server-side implementation includes API integration with pagination support, using the dummyJSON API as an example.

Features

• Server-side pagination
• Data fetching with error handling
• Dynamic page size adjustment
• Loading state management
• Total items tracking

API Integration

1. Fetch Function:

const fetchTableData = async (page, pageSize) => {
  const skip = (page - 1) * pageSize;
  try {
    const response = await fetch(`https://dummyjson.com/users?limit=${pageSize}&skip=${skip}`);
    const data = await response.json();
    return {
      data: data.users.map(user => ({
        // ... data transformation
      })),
      total: data.total
    };
  } catch (error) {
    console.error("API Error:", error);
    throw error;
  }
};

State Management

const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const [totalItems, setTotalItems] = useState(0);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(5);

Data Fetching Implementation

const fetchData = async (page, size) => {
  setLoading(true);
  try {
    const response = await fetchTableData(page, size);
    setData(response.data);
    setTotalItems(response.total);
  } catch (error) {
    console.error("Error fetching data:", error);
  } finally {
    setLoading(false);
  }
};

Best Practices

1. Error Handling

• Implement proper error handling for API calls
• Show user-friendly error messages
• Log errors for debugging

2. Loading States

• Display loading indicators during data fetching
• Disable actions while loading
• Maintain UI responsiveness

3. Data Transformation

• Transform API data to match table requirements
• Handle missing or null values
• Format dates and special fields

4. Performance

• Implement proper pagination
• Use appropriate page sizes
• Cache results when possible
• Implement debouncing for search/filter operations

Security Considerations

1. Input Validation

• Validate page numbers and sizes
• Sanitize search inputs
• Implement proper CORS headers

2. Authentication

• Implement proper authentication for protected routes
• Include authentication headers in requests
• Handle session expiration

3. Data Protection

• Implement proper data access controls
• Sanitize sensitive information
• Follow data protection regulations

👥 Contributors

• Developer: Md Maaz Ahmad
• Organization: Ramailo Technology