EasyTable: Simplify Table Management in React

EasyTable is a versatile React library designed to streamline the process of creating and managing tables within your web applications. Whether you're building a data-rich dashboard, a product catalog, or any application that requires organized data presentation, EasyTable empowers you with intuitive tools to handle complex table structures with ease.

Key Features:

✨ Effortless Integration: Seamlessly integrate EasyTable into your React projects using a simple component, minimizing the learning curve and enabling rapid implementation.

🔍 Smart Search: Implement advanced search functionalities across multiple columns, providing users with the ability to quickly find specific data points without hassle.

🎛️ Customizable Design: Tailor the look and feel of your tables to match your application's aesthetics. Customize headers, rows, and cells to maintain consistent branding.

🚀 Performance Optimized: With an emphasis on performance, EasyTable efficiently handles large datasets, utilizing smart rendering techniques to ensure smooth user experiences.

Getting Started:

1. Install EasyTable using your preferred package manager:

   npm install easytable

2. A Simple Code Example

   import React from 'react';
   import EazyTable from 'eazytable';
   import 'eazytable/dist/eazytable.css';
   
   
   const tempData = [
       { name: "Tanjiro", age: 17, height: "5'2", id: 1 },
       { name: "Luffy", age: 17, height: "5'4", id: 2 },
       { name: "Ichigo", age: 16, height: "5'8", id: 3 },
       { name: "Thorfinn", age: 23, height: "5'1", id: 4 },
       { name: "Kaneki", age: 16, height: "5'2", id: 5 },
       { name: "Shinichi", age: 18, height: "5'8", id: 6 }
   ]
   
   const columns = [
       // Column Declarations to display from the datasets
       { field: 'name', label: "Name", width: 200 },
       { field: 'age', label: "Age", width: 200 },
       { field: 'height', label: "Height", width: 200 },
       // Custom Field
       {
           field: 'actions',
           width: 200,
           label: "Actions", render: (row) => {
               return <button onClick={() => alert(row.id)}>View</button>
           }
       }
   ]
   
   const Table = () => {
       return (
           <EazyTable
               title="Users"
               columns={columns}
               data={tempData}
               rowKeyField="id"
           />
       );
   };
   
   export default Table;

3. You're good to go! Let's run the code!

   

Props References

EazyTable Props

|Prop |Type | Required | Description | |------------|-----------|-------------|----------------| | title | String | true | Set the Title of the table| | columns | Array | true | An Array Containing a list of columns| | data | Array | true | An array containting row data | | rowKeyField | Number |true| The field in data which contains a unique row key | | showHeader | Boolean |false| | | showFooter | Boolean |false| | | height | String |false| Set a fixed height for the table | | alignText | String|false | Set the alignment of text in the table | | striped | String |false| Enable stripes for rows |

Column

| Key |Type |Required | Description | |------------|--------------|---------|----------------| | title | String | true | Name of the column| | label | String | true | An Array Containing a list of columns| | width | Number | false | Set the column width| | render | Component | false | First argument will have a paramenter called row |