Example of AgGrid usage - storybook showcase

AgTable.stories.tsx

import React, { useMemo, useState } from "react";
import { Meta } from "@storybook/react";
import { AgGridReact } from "ag-grid-react";
import { ColDef } from "ag-grid-community";

import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

export default {
  title: __filename.replace(".stories.tsx", "")
} as Meta;

export const Default = () => <div>test</div>;

const colors = ["Red", "Green", "Blue"];

interface ColorRow {
  color1: string;
  color2: string;
  color3: string;
  description: string;
}

const data: ColorRow[] = Array.from(Array(20).keys()).map((val, index) => ({
  color1: colors[index % 3],
  color2: colors[index % 3],
  color3: colors[index % 3],
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}));

export const GridExample = () => {
  const [rowData, setRowData] = useState(data);
  const [columnDefs, setColumnDefs] = useState<ColDef<ColorRow>[]>([
    {
      headerName: "Text Editor",
      field: "color1",
      rowDrag: true,
      cellEditor: "agTextCellEditor",
      cellEditorParams: {
        maxLength: 20
      }
    },
    {
      headerName: "Select Editor",
      field: "color2",
      cellEditor: "agSelectCellEditor",
      cellEditorParams: {
        values: colors
      }
    },
    {
      headerName: "Rich Select Editor",
      field: "color3",
      cellEditor: "agSelectCellEditor",
      cellEditorPopup: true,
      cellEditorParams: {
        values: colors
      }
    },
    {
      headerName: "Large Text Editor",
      field: "description",
      cellEditorPopup: true,
      cellEditor: "agLargeTextCellEditor",
      cellEditorParams: {
        maxLength: 250,
        rows: 10,
        cols: 50
      },
      flex: 2
    }
  ]);
  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      resizable: true,
      editable: true,
      sortable: true,
      filter: false
    };
  }, []);

  return (
    <div className="ag-theme-alpine w-full h-[80vh] border">
      <AgGridReact
        rowDragManaged
        animateRows
        suppressMoveWhenRowDragging
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
      />
    </div>
  );
};