@venkatmca/data-table-react v1.0.0

Data-table-react

Welcome to DataTableReact, your ultimate solution for integrating jQuery DataTable-like functionality into React components! With DataTableReact, effortlessly enhance your React applications with dynamic and responsive data tables. Harness a rich array of customizable options, empowering you to efficiently manage and visualize data within your projects. Seamlessly integrate DataTableReact into your workflow for streamlined data presentation and enhanced user experience.

Installation

$ npm install --save @venkatmca/data-table-react
$ yarn add @venkatmca/data-table-react

$ import {
  DataTable,
} from "@venkatmca/data-table-react";

Features

• Dynamic Data Rendering: Render dynamic data tables with ease, supporting a variety of data sources and formats.
• Customizable Columns: Define and customize columns to suit your data presentation needs, including sorting, filtering, and formatting options.
• Pagination: Enable pagination to efficiently navigate through large datasets, with customizable page sizes and page indicators.
• Search and Filtering: Implement search and filtering functionality to quickly locate and narrow down specific data entries.
• Responsive Design: Ensure optimal viewing experience across devices with responsive design that adapts to different screen sizes.
• Integration with React Applications: Seamlessly integrate DataTableReact into your existing React applications without any hassle.
• Extensible and Configurable: Configure DataTableReact to meet your specific requirements and extend its functionality with ease.
• Performance Optimization: Optimize performance for large datasets with efficient rendering and data handling mechanisms.
• Theming and Styling: Customize the look and feel of your data tables with flexible theming and styling options.
• Cross-Browser Compatibility: Support a wide range of modern browsers for consistent behavior and performance.

The gist

Default

import { DataTable } from "@venkatmca/data-table-react";

function App() {
  const title = "Test DataTable";
  const heads = [
    { name: "ID", fieldname: "id" },
    { name: "Name", fieldname: "name" },
  ];
  const data = [
    { id: 1, name: "John" },
    { id: 2, name: "Doe" },
  ];
  return (
    <div>
      <DataTable
        title={title}
        heads={heads}
        data={data}
        currentpage={1}
        itemsperpage={10}
        hasItemsPerPageDropdown={true}
        hasPagination={true}
      />
    </div>
  );
}

Data Table Example

The Data Table Properties

Properties used to customise the rendering:

HeadProps Properties

The same country select properties and additionally

Demo

A demo is worth a thousand words

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! venkatmcajj@gmail.com

Financial Contributors

Become a financial contributor and help us sustain our community. Contribute

License

Licensed under MIT