Simple yet powerful react table component

Simple yet Powerful React Table Component

In the ever-evolving landscape of front-end development, having efficient and customizable components is crucial for building robust applications. Today, I'm excited to introduce "Gadwal," a simple yet powerful React table component that can enhance your data presentation effortlessly.

Features

Gadwal stands out with the following features:

Customizable Columns: Define the structure and content of your table with ease.
Custom Rendering for Each Cell: Tailor the display of data in each cell to suit your needs.
Tailwind CSS Support: Seamlessly integrate with Tailwind CSS for consistent styling.
open source

Usage

import React from 'react';
import Table from 'gadwal';

const data = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "oqkz9@example.com",
    website: "hildegard.org",
    phone: "1-770-736-8031 x56442",
    company: {
      name: "Romaguera-Crona",
      catchPhrase: "Multi-layered client-server neural-net",
      bs: "harness real-time e-markets",
    },
  }
];

const table = [
  { header: "id", name: "id", size: 2 },
  { header: "name", name: "name", size: 5 },
  { header: "email", name: "email", size: 5 },
  { header: "website", name: "website", size: 4 },
  { header: "phone", name: "phone", size: 4 },
  { header: "company", name: "company", size: 4, custom: (d) => d.company.name },
];

function App() {
  return (
    <div className="flex w-full">
      <Table data={data} table={table} />
    </div>
  );
}

export default App;

output

it can do more complex tables

import Table, { GadwalRow } from 'gadwal';
import { teammates, TeamMatesSchema } from './data.test';
import { _date } from '@helpers/date.helpers';


const userStatus = {
    "invited" : <div className='text-[#063EF8] bg-[#063EF8]/10 w-fit px-3 py-1 rounded-md  '> invited</div> ,
    "active" : <div className='text-[#00A774] bg-[#00A774]/10 w-fit px-3 py-1 rounded-md  '> active</div> ,
    "inactive" : <div className='text-[#A70027] bg-[#A70027]/10 w-fit px-3 py-1 rounded-md  '> inactive</div>
}

export default function Test() {

    const table: GadwalRow<TeamMatesSchema>[] = [
        { header : "email" , name : "email" , size : 7, custom : d =>{
            return <div className='flex items-center'>
                <div className="w-[50px] h-[50px] rounded-full  overflow-hidden mr-2">
                    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="profile" className="w-full h-full rounded-full object-cover" />
                </div>
                <div className="flex-1">
                    <p className="capitalize mb-0 text-black">abdelrahman seada</p>
                    <p className="capitalize mb-0">{d.email}</p>
                </div>

            </div>
        } },
        { header : "status" , name : "status" , size : 4 , custom : d => userStatus[d.status] }, 
        { header : "role" , name :"type" , size : 4 , custom : d => <span className='capitalize'>{d.type.split(":")[1]}</span> },
        { header : "invited date" , name : "updated_at" , size : 4 , custom : d => _date(d.updated_at).local() }
    ];

  return (
   <Table
        data={teammates} 
        table={table}
        bodyProps={{ className : "border-b-[1px] items-center h-[90px] !p-0"  }}
        headerProps={{ className : "border-b-[1px] items-center cap   h-[90px]"  }}
        fixedHeight={false}
    />
  )
}

output table

typescript support

if we have an interface of our data like the following

export interface TeamMatesSchema {
    status: "invited" | "active" | "inactive";
    user_name: string;
    _id: string;
    type: string;
    email: string;
    updated_at: string;
}

using Generic GadwalRow will help you to know what is the data looks like in the name key (which should match the data key between table and api data to display it)

GadwalRow<TeamMatesSchema>[]

also for custom cell rendering

props

props	usage	required	default
data	table data that is going to be rendred	true	-
table	coulums of the table each represents a cell	true	-
fixedHeight	to force each table row to a fixed height (50px)	false	true
animated	animate table content	false	false
stripped	make table rows stripped	false	true
bodyProps	to pass custom styles , classes , ...etc all div attributes to each row of data	false	{}
headerProps	to pass custom styles , classes , ...etc all div attributes to only table head	false	{}
bodyCellProps	to pass custom styles , classes , ...etc all div attributes to each row cells of data	false	{}
headerCellProps	to pass custom styles , classes , ...etc all div attributes to only table head cells	false	{}

notes

with props bodyProps, headerProps, bodyCellProps, headerCellProps you can pass any kind of attributes that could be passed to a normal html div element for the whole row (bodyProps) or each cell in the row (bodyCellProps) also for table header (headerProps) or each cell in the header (headerCellProps) , attributes like classes id onClick and and many more...

and many more it's up to your creativity and imaginations

more about installation and configuration on npm gadwal page gadwal on npm

Blog

Simple yet powerful react table component

abdelrahman seada