gemilangtable v1.1.1

Gemilang Table

A customizable and feature-rich table component for React. It provides various features such as sorting, pagination, date filtering, and more.

Installation

To install the gemilangtable library, run the following command:

npm install gemilangtable

This library require Sass so after that, install Sass by run following command

npm install sass

Usage

Importing the GemilangTable Component First, import the GemilangTable component from the gemilangtable library:

import { GemilangTable } from "gemilangtable";

Example Usage

import { GemilangTable } from "gemilangtable";
import React, { useState } from "react";

const App = () => {
  const [dateRange, setDateRange] = useState({
    startDate: "2023-01-01",
    endDate: "2023-12-31",
  });

  const handleDateRange = (newRange) => {
    setDateRange(newRange);
  };

  const data = [
    {
      no: 1,
      title: "Title 1",
      description: "Lorem ipsum dolor sit amet.",
      date: "2023-01-01",
    },
    {
      no: 2,
      title: "Title 2",
      description: "Lorem ipsum dolor sit amet.",
      date: "2023-01-01",
    },
    {
      no: 3,
      title: "Title 3",
      description: "Lorem ipsum dolor sit amet.",
      date: "2023-02-01",
    },
  ];

  const columns = [
    {
      header: "No",
      accessor: "no",
      width: "5%",
    },
    {
      header: "Title",
      accessor: "title",
      width: "25%",
      sortable: true,
    },
    {
      header: "Description",
      accessor: "description",
      width: "50%",
    },
    {
      header: "Date",
      accessor: "date",
      width: "20%",
    },
  ];

  return (
    <div className="container mx-auto p-5">
      <h1 className="text-3xl font-bold mb-5 text-center text-gray-800">
        Table Data
      </h1>
      <GemilangTable
        columns={columns}
        data={data}
        dateFilter={true}
        dateRange={dateRange}
        onDateRangeChange={handleDateRange}
        dateField="date"
      />
    </div>
  );
};

export default App;

API