بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ

Gadwal

Basic React Table.

Features

• Customizable columns
• Supports custom rendering for each cell
• Tailwind CSS support

Installation

npm install gadwal

Add styles to main.tsx

import "gadwal/dist/style.css"

Usage

Sample Data

const data = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "[email protected]",
    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",
    },
  },
  {
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "[email protected]",
    website: "anastasia.net",
    phone: "010-692-6593 x09125",
    company: {
      name: "Deckow-Crist",
      catchPhrase: "Proactive didactic contingency",
      bs: "synergize scalable supply-chains",
    },
  },
];

Table Configuration

const table: TableRow[] = [
  { 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 },
];

Component Usage

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

const data = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "[email protected]",
    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",
    },
  },
  {
    id: 2,
    name: "Ervin Howell",
    username: "Antonette",
    email: "[email protected]",
    website: "anastasia.net",
    phone: "010-692-6593 x09125",
    company: {
      name: "Deckow-Crist",
      catchPhrase: "Proactive didactic contingency",
      bs: "synergize scalable supply-chains",
    },
  },
];

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;

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 | {} |

License

MIT

🚀 About Me

I'm a MERN stack developer...

Authors

• @abdoseadaa

Repository

Repository

Summary

﴾ ذَٰلِكَ فَضْلُ اللَّهِ يُؤْتِيهِ مَن يَشَاءُ ۚ وَاللَّهُ ذُو الْفَضْلِ الْعَظِيمِ﴿