Basic Example

1. Import the component along width it’s style:

   import { DataGrid } from "@reveraie/datagrid";
   import "@reveraie/datagrid/dist/index.css";

2. To get started, provide the rows and columns props to the DataGrid component:

   const columns: DataGridColumn[] = [/*...*/];
   const rows: DataGridRow[] = [/*...*/];
   /// ...
   <DataGrid columns={columns} rows={rows} />

Preview

From

Subject

Date

Bob Wilson

Important announcement

2023-01-01

John Doe

New feature request

2023-01-02

Alice Smith

Sales update

2023-01-03

Mike Johnson

Bug report

2023-01-04

Emily Davis

Feature request

2023-01-05

David Brown

Bug report

2023-01-06

Sophia Wilson

Sales update

2023-01-07

James Smith

Bug report

2023-01-08

Olivia Johnson

Feature request

2023-01-09

Liam Davis

Sales update

2023-01-10

Emma Brown

Bug report

2023-01-11

Noah Wilson

Feature request

2023-01-12

Code

demo.tsx

import {
  EnvelopeIcon,
  EnvelopeOpenIcon,
  StarIcon,
  PaperClipIcon,
} from "@heroicons/react/24/outline";
import { StarIcon as StarIconSolid } from "@heroicons/react/24/solid";

import { DataGrid, type DataGridColumn, type DataGridRow } from "@reveraie/datagrid";
import "@reveraie/datagrid/dist/index.css";
import "./style.css"

import React, { useCallback, useState } from "react";

export default function BasicExample() {
  const [columns, setColumns] = useState([
    {
      name: "status",
      width: 32,
      allowResize: false,
      render: (value) => {
        return (
          <div>
            {value ? (
              <EnvelopeOpenIcon className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
            ) : (
              <EnvelopeIcon className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
            )}
          </div>
        );
      },
    },
    {
      name: "from",
      label: "From",
      width: 120,
    },
    {
      name: "favorite",
      width: 32,
      allowResize: false,
      render: (value) => {
        return (
          <div onClick={handleStartClick}>
            {value ? (
              <StarIconSolid className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
            ) : (
              <StarIcon className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
            )}
          </div>
        );
      },
    },
    {
      name: "subject",
      label: "Subject",
      width: "*",
    },
    {
      name: "attachments",
      width: 32,
      allowResize: false,
      render: (value) => {
        return (
          <div>
            {value ? (
              <PaperClipIcon className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
            ) : null}
          </div>
        );
      },
    },
    {
      name: "date",
      label: "Date",
      width: 120,
    },
  ] as DataGridColumn[]);

  const [rows, setRows] = useState<DataGridRow[]>([
    {
      values: {
        status: true,
        from: "Bob Wilson",
        favorite: true,
        subject: "Important announcement",
        attachments: 3,
        date: "2023-01-01",
      },
    },
    {
      values: {
        status: false,
        from: "John Doe",
        favorite: false,
        subject: "New feature request",
        attachments: 0,
        date: "2023-01-02",
      },
    },
    {
      values: {
        status: true,
        from: "Alice Smith",
        favorite: false,
        subject: "Sales update",
        attachments: 2,
        date: "2023-01-03",
      },
    },
    {
      values: {
        status: false,
        from: "Mike Johnson",
        favorite: true,
        subject: "Bug report",
        attachments: 1,
        date: "2023-01-04",
      },
    },
    {
      values: {
        status: true,
        from: "Emily Davis",
        favorite: false,
        subject: "Feature request",
        attachments: 0,
        date: "2023-01-05",
      },
    },
    {
      values: {
        status: false,
        from: "David Brown",
        favorite: true,
        subject: "Bug report",
        attachments: 2,
        date: "2023-01-06",
      },
    },
    {
      values: {
        status: true,
        from: "Sophia Wilson",
        favorite: false,
        subject: "Sales update",
        attachments: 1,
        date: "2023-01-07",
      },
    },
    {
      values: {
        status: false,
        from: "James Smith",
        favorite: true,
        subject: "Bug report",
        attachments: 0,
        date: "2023-01-08",
      },
    },
    {
      values: {
        status: true,
        from: "Olivia Johnson",
        favorite: false,
        subject: "Feature request",
        attachments: 2,
        date: "2023-01-09",
      },
    },
    {
      values: {
        status: false,
        from: "Liam Davis",
        favorite: true,
        subject: "Sales update",
        attachments: 1,
        date: "2023-01-10",
      },
    },
    {
      values: {
        status: true,
        from: "Emma Brown",
        favorite: false,
        subject: "Bug report",
        attachments: 0,
        date: "2023-01-11",
      },
    },
    {
      values: {
        status: false,
        from: "Noah Wilson",
        favorite: true,
        subject: "Feature request",
        attachments: 2,
        date: "2023-01-12",
      },
    },
  ]);

  const handleStartClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const row = (e.target as HTMLDivElement).closest(
        ".dg-row",
      ) as HTMLDivElement;
      if (!row) return;
      const rowIndex = Number(row.getAttribute("data-row-index"));
      setRows((prev) => {
        const updatedRows = [...prev];
        const row = updatedRows[rowIndex];
        updatedRows[rowIndex] = {
          ...row,
          values: {
            ...row.values,
            favorite: !row.values.favorite,
          },
        };
        return updatedRows;
      });
    },
    [],
  );

  const handleColumnReorder = useCallback(
    (fromIndex: number, toIndex: number) => {
      setColumns((prev) => {
        const updatedColumns = [...prev];
        const [movedColumn] = updatedColumns.splice(fromIndex, 1);
        updatedColumns.splice(toIndex, 0, movedColumn);
        return updatedColumns;
      });
    },
    [],
  );

  return (
    <DataGrid
      gridId="1"
      className="max-h-64"
      columns={columns}
      rows={rows}
      onColumnReorder={handleColumnReorder}
    />
  );
}