import { useMemo, useState } from "react";
import {
  HvIconButton,
  HvTableColumnConfig,
} from "@hitachivantara/uikit-react-core";
import { Delete } from "@hitachivantara/uikit-react-icons";


import { makeData, type AssetEvent } from "./makeData";
import { MyTable } from "./MyTable";


export default function Demo() {
  const [data] = useState(() => makeData(8));
  const columns = useMemo<HvTableColumnConfig<AssetEvent>[]>(
    () => [
      { Header: "Title", accessor: "name", style: { minWidth: 120 } },
      { Header: "Time", accessor: "createdDate", style: { minWidth: 100 } },
      { Header: "Event Type", accessor: "eventType", style: { minWidth: 100 } },
      { Header: "Status", accessor: "status", style: { minWidth: 100 } },
      {
        Header: "Probability",
        accessor: "riskScore",
        align: "right",
        Cell: ({ value }) => `${value}%`,
      },
      { Header: "Severity", accessor: "severity" },
      { Header: "Priority", accessor: "priority" },
      {
        id: "delete",
        variant: "actions",
        Cell: () => (
          <HvIconButton title="Delete">
            <Delete />
          </HvIconButton>
        ),
      },
    ],
    [],
  );


  return <MyTable<AssetEvent> data={data} columns={columns} />;
}

import { useCallback, useMemo, useRef, useState } from "react";
import {
  HvIconButton,
  HvRowInstance,
  HvSearchInput,
  HvTab,
  HvTableColumnConfig,
  HvTableInstance,
  HvTabs,
} from "@hitachivantara/uikit-react-core";
import { Delete, Duplicate, Preview } from "@hitachivantara/uikit-react-icons";


import { makeData, type AssetEvent } from "./makeData";
import { MyTable } from "./MyTable";


export default function Demo() {
  const [data, setData] = useState(() => makeData(128));
  const [tab, setTab] = useState<string>("");
  const tableRef = useRef<HvTableInstance<AssetEvent>>(null);


  const deleteRow = useCallback((row: HvRowInstance<AssetEvent>) => {
    setData((prev) => prev.filter((r) => r.id !== row.original.id));
  }, []);


  const columns = useMemo<HvTableColumnConfig<AssetEvent>[]>(
    () => [
      { Header: "Title", accessor: "name", style: { minWidth: 120 } },
      { Header: "Time", accessor: "createdDate", style: { minWidth: 100 } },
      { Header: "Event Type", accessor: "eventType", style: { minWidth: 100 } },
      { Header: "Status", accessor: "status", style: { minWidth: 100 } },
      {
        Header: "Probability",
        accessor: "riskScore",
        align: "right",
        Cell: ({ value }) => `${value}%`,
      },
      { Header: "Severity", accessor: "severity" },
      { Header: "Priority", accessor: "priority" },
      {
        id: "delete",
        variant: "actions",
        Cell: ({ row }) => (
          <HvIconButton title="Delete" onClick={() => deleteRow(row)}>
            <Delete />
          </HvIconButton>
        ),
      },
    ],
    [deleteRow],
  );


  return (
    <MyTable<AssetEvent>
      data={data}
      columns={columns}
      tableRef={tableRef}
      raisedHeader
      title={
        <HvTabs
          value={tab}
          onChange={(evt, val) => {
            setTab(val);
            tableRef.current?.setFilter?.("status", val || undefined);
          }}
        >
          <HvTab value="" label="All" />
          <HvTab value="open" label="Open" />
          <HvTab value="closed" label="Closed" />
        </HvTabs>
      }
      actions={
        <HvSearchInput
          placeholder="Search all columns"
          onChange={(evt, val) => tableRef.current?.setGlobalFilter?.(val)}
        />
      }
      bulkActions={[
        { id: "clone", label: "Clone", icon: <Duplicate /> },
        { id: "remove", label: "Remove", icon: <Delete /> },
        { id: "preview", label: "Preview", icon: <Preview />, disabled: true },
      ]}
      onBulkAction={(evt, action, selectedRows) => {
        if (action.id === "remove") {
          selectedRows.forEach(deleteRow);
        } else if (action.id === "clone") {
          const clonedData = selectedRows.map(({ original }) => ({
            ...original,
            id: `${original.id}-copy`,
            name: `${original.name}-copy`,
          }));
          setData((prev) => prev.concat(clonedData));
        }
      }}
      options={{
        initialState: {
          pageSize: 10,
        },
      }}
    />
  );
}

import { useState } from "react";
import { useGroupBy } from "react-table";
import {
  HvCellInstance,
  HvRowInstance,
  HvTable,
  HvTableBody,
  HvTableCell,
  HvTableColumnConfig,
  HvTableContainer,
  HvTableHead,
  HvTableHeader,
  HvTableRow,
  HvTableSection,
  HvTableState,
  theme,
  useHvHeaderGroups,
  useHvRowExpand,
  useHvTable,
} from "@hitachivantara/uikit-react-core";


import { makeData, type AssetEvent } from "./makeData";


const columns: HvTableColumnConfig<AssetEvent>[] = [
  { Header: "Title", accessor: "name", style: { minWidth: 120 } },
  { Header: "Time", accessor: "createdDate", style: { minWidth: 100 } },
  { Header: "Type", accessor: "eventType", style: { minWidth: 100 } },
  { Header: "Status", accessor: "status", style: { width: 140 } },
  {
    Header: "Probability",
    accessor: "riskScore",
    align: "right", // numeric values should be right-aligned
    Cell: ({ value }) => `${value}%`,
    aggregate: "average",
    Aggregated: ({ value }) => `Avg. ${value}%`,
  },
  {
    Header: "Event",
    id: "eventGroup",
    columns: [
      { Header: "Severity", accessor: "severity" },
      { Header: "Priority", accessor: "priority" },
    ],
  },
];


export default function Demo() {
  const [data] = useState(() => makeData(12));


  return (
    <Table<AssetEvent>
      data={data}
      columns={columns}
      initialState={{
        groupBy: ["status"],
        expanded: {
          "status:Closed": true,
          "status:Open": true,
        },
      }}
    />
  );
}


export function Table<T extends object>({
  data,
  columns,
  initialState,
}: {
  data: T[];
  columns: HvTableColumnConfig<T>[];
  initialState: Partial<HvTableState<T>>;
}) {
  const table = useHvTable<T>(
    { columns, data, initialState },
    useGroupBy,
    useHvHeaderGroups,
    useHvRowExpand,
  );


  const renderCellContent = (
    cell: HvCellInstance<T>,
    row: HvRowInstance<T>,
  ) => {
    if (cell.isGrouped) {
      // If it's a grouped cell, add an expander and row count
      return (
        <>
          {cell.render("Cell")} ({row.subRows.length})
        </>
      );
    }
    // If the cell is aggregated, use the Aggregated renderer
    if (cell.isAggregated) return cell.render("Aggregated");
    // For cells with repeated values, render null
    if (cell.isPlaceholder) return null;
    // return the default cell renderer otherwise
    return cell.render("Cell");
  };


  return (
    <HvTableSection>
      <HvTableContainer>
        <HvTable {...table.getTableProps()}>
          <HvTableHead>
            {table.headerGroups.map((headerGroup) => (
              <HvTableRow
                {...headerGroup.getHeaderGroupProps()}
                key={headerGroup.getHeaderGroupProps().key}
              >
                {headerGroup.headers.map((col) => (
                  <HvTableHeader
                    {...col.getHeaderProps()}
                    key={col.getHeaderProps().key}
                  >
                    {col.render("Header")}
                  </HvTableHeader>
                ))}
              </HvTableRow>
            ))}
          </HvTableHead>
          <HvTableBody {...table.getTableBodyProps()}>
            {table.rows.map((row: HvRowInstance<T>) => {
              table.prepareRow(row);
              const { key, ...rowProps } = row.getRowProps();
              const hasSubRows = row.subRows.length > 0;


              return (
                <HvTableRow
                  key={key}
                  style={{
                    backgroundColor:
                      theme.colors[hasSubRows ? "bgContainer" : "bgPage"],
                  }}
                  {...rowProps}
                >
                  {row.cells.map((cell) => (
                    <HvTableCell
                      {...cell.getCellProps()}
                      key={cell.getCellProps().key}
                    >
                      {renderCellContent(cell, row)}
                    </HvTableCell>
                  ))}
                </HvTableRow>
              );
            })}
          </HvTableBody>
        </HvTable>
      </HvTableContainer>
    </HvTableSection>
  );
}

import { useMemo, useState } from "react";
import {
  HvCellProps,
  HvIconButton,
  HvStatusIcon,
  HvTableColumnConfig,
  HvTag,
  HvTypography,
} from "@hitachivantara/uikit-react-core";
import { Delete } from "@hitachivantara/uikit-react-icons";


import { makeData, type AssetEvent } from "./makeData";
import { MyTable } from "./MyTable";


export default function Demo() {
  const [data] = useState(() => makeData(8));
  const columns = useMemo<HvTableColumnConfig<AssetEvent>[]>(
    () => [
      {
        Header: "Id",
        accessor: "id",
        Cell: ({ value }) => (
          <HvTypography link component="a" href="#">
            {value}
          </HvTypography>
        ),
      },
      {
        Header: "Title",
        accessor: "name",
        style: { minWidth: 120 },
        Cell: TitleDescription,
      },
      { Header: "Time", accessor: "createdDate", style: { minWidth: 100 } },
      {
        Header: "Event Type",
        accessor: "eventType",
        style: { minWidth: 100 },
        Cell: ({ value }) => <HvTag label={value} color="info" />,
      },
      {
        Header: "Status",
        accessor: "status",
        style: { minWidth: 100 },
        Cell: ({ value }) => (
          <div className="flex items-center gap-xxs">
            <HvStatusIcon
              variant={value === "Open" ? "success" : "error"}
              type="simple"
            />
            {value}
          </div>
        ),
      },
      {
        Header: "Probability",
        accessor: "riskScore",
        align: "right",
        Cell: ProgressBar,
      },
      { Header: "Severity", accessor: "severity" },
      {
        Header: "Priority",
        accessor: "priority",
        Cell: ({ value }) => (
          <HvTag label={value} color={getPriorityColor(value)} />
        ),
      },
      {
        id: "delete",
        variant: "actions",
        Cell: () => (
          <HvIconButton title="Delete event">
            <Delete />
          </HvIconButton>
        ),
      },
    ],
    [],
  );


  return <MyTable<AssetEvent> data={data} columns={columns} />;
}


const TitleDescription = ({ row }: HvCellProps<AssetEvent>) => (
  <div className="p-xxs">
    <HvTypography>{row.original.name}</HvTypography>
    <HvTypography variant="caption1" className="text-textSubtle">
      {row.original.description}
    </HvTypography>
  </div>
);


const ProgressBar = ({ row }: HvCellProps<AssetEvent>) => (
  <div className="flex flex-col">
    <HvTypography variant="caption2">
      {`${row.original.riskScore * 10}%`}
    </HvTypography>
    <div className="flex h-4px bg-border">
      <div
        className="bg-text"
        style={{ width: `${row.original.riskScore * 10}%` }}
      />
    </div>
  </div>
);


function getPriorityColor(priority: AssetEvent["priority"]) {
  switch (priority) {
    case "High":
      return "negative";
    case "Medium":
      return "warning";
    case "Low":
      return "positive";
    default:
      return "neutral";
  }
}