@bsol-oss/react-datatable5 1.0.5 → 1.0.7

package/src/components/TableHeader.tsx

@@ -1,106 +0,0 @@
-import { Box, Button, Flex, Th, Thead, Tr } from "@chakra-ui/react";
-import { flexRender } from "@tanstack/react-table";
-import { MdFilterListAlt } from "react-icons/md";
-
-// import { Box } from "framer-motion";
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CloseIcon,
-  UpDownIcon,
-} from "@chakra-ui/icons";
-import { useDataTable } from "./useDataTable";
-
-export interface TableHeaderProps {
-  canResize?: boolean;
-}
-
-const TableHeader = ({ canResize }: TableHeaderProps) => {
-  const { table } = useDataTable();
-  return (
-    <Thead>
-      {table.getHeaderGroups().map((headerGroup) => (
-        <Tr key={crypto.randomUUID()} style={{ columnSpan: "all" }}>
-          {headerGroup.headers.map((header) => {
-            const resizeProps = {
-              onClick: () => header.column.resetSize(),
-              onMouseDown: header.getResizeHandler(),
-              onTouchStart: header.getResizeHandler(),
-              cursor: "col-resize",
-            };
-
-            return (
-              <Th
-                padding={"0rem"}
-                key={crypto.randomUUID()}
-                colSpan={header.colSpan}
-                width={`${header.getSize()}px`}
-              >
-                <Flex alignItems={"center"} gap={"0.5rem"} padding={"0.5rem"}>
-                  <Box>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                  </Box>
-                  {header.column.getCanSort() && (
-                    <>
-                      <Button
-                        onClick={(e) => {
-                          header.column.toggleSorting();
-                        }}
-                      >
-                        {header.column.getNextSortingOrder() === false && (
-                          // <Text>To No sort</Text>
-                          <ChevronUpIcon />
-                        )}
-                        {header.column.getNextSortingOrder() === "asc" && (
-                          // <Text>To asc</Text>
-                          <UpDownIcon />
-                        )}
-                        {header.column.getNextSortingOrder() === "desc" && (
-                          // <Text>To desc</Text>
-                          <ChevronDownIcon />
-                        )}
-                      </Button>
-
-                      {header.column.getIsSorted() && (
-                        <Button
-                          onClick={(e) => {
-                            header.column.clearSorting();
-                          }}
-                        >
-                          <CloseIcon />
-                        </Button>
-                      )}
-                    </>
-                  )}
-
-                  {header.column.getIsFiltered() && <MdFilterListAlt />}
-                  {canResize && (
-                    <Box
-                      borderRight={
-                        header.column.getIsResizing()
-                          ? "0.25rem solid black"
-                          : "0.25rem solid grey"
-                      }
-                      height={"5rem"}
-                      width={"5px"}
-                      userSelect={"none"}
-                      style={{ touchAction: "none" }}
-                      {...resizeProps}
-                    ></Box>
-                  )}
-                </Flex>
-              </Th>
-            );
-          })}
-        </Tr>
-      ))}
-    </Thead>
-  );
-};
-
-export default TableHeader;

package/src/components/TablePagination.tsx

@@ -1,58 +0,0 @@
-import { Button, ButtonGroup, IconButton } from "@chakra-ui/react";
-import {
-  MdArrowBack,
-  MdArrowForward,
-  MdFirstPage,
-  MdLastPage,
-} from "react-icons/md";
-import { useDataTable } from "./useDataTable";
-
-export interface PaginationProps {}
-
-const TablePagination = ({}: PaginationProps) => {
-  const {
-    firstPage,
-    getCanPreviousPage,
-    previousPage,
-    getState,
-    nextPage,
-    getCanNextPage,
-    lastPage,
-  } = useDataTable().table;
-  return (
-    <ButtonGroup isAttached>
-      <IconButton
-        icon={<MdFirstPage />}
-        onClick={() => firstPage()}
-        disabled={!getCanPreviousPage()}
-        aria-label={"first-page"}
-      ></IconButton>
-      <IconButton
-        icon={<MdArrowBack />}
-        onClick={() => previousPage()}
-        disabled={!getCanPreviousPage()}
-        aria-label={"previous-page"}
-      ></IconButton>
-      <Button onClick={() => {}} disabled={!getCanPreviousPage()}>
-        {getState().pagination.pageIndex + 1}
-      </Button>
-
-      <IconButton
-        onClick={() => nextPage()}
-        disabled={!getCanNextPage()}
-        aria-label={"next-page"}
-      >
-        <MdArrowForward />
-      </IconButton>
-      <IconButton
-        onClick={() => lastPage()}
-        disabled={!getCanNextPage()}
-        aria-label={"last-page"}
-      >
-        <MdLastPage />
-      </IconButton>
-    </ButtonGroup>
-  );
-};
-
-export default TablePagination;

package/src/components/TableSorter.tsx

@@ -1,62 +0,0 @@
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  CloseIcon,
-  UpDownIcon,
-} from "@chakra-ui/icons";
-import { Button, Flex, Text } from "@chakra-ui/react";
-import { useDataTable } from "./useDataTable";
-
-const TableSorter = () => {
-  const { table } = useDataTable();
-
-  return (
-    <>
-      {table.getHeaderGroups().map((headerGroup) => (
-        <>
-          {headerGroup.headers.map((header) => {
-            return (
-              <>
-                {header.column.getCanSort() && (
-                  <Flex alignItems={"center"} gap={"0.5rem"} padding={"0.5rem"}>
-                    <Text>{header.column.id}</Text>
-                    <Button
-                      onClick={(e) => {
-                        header.column.toggleSorting();
-                      }}
-                    >
-                      {header.column.getNextSortingOrder() === false && (
-                        // <Text>To No sort</Text>
-                        <ChevronUpIcon />
-                      )}
-                      {header.column.getNextSortingOrder() === "asc" && (
-                        // <Text>To asc</Text>
-                        <UpDownIcon />
-                      )}
-                      {header.column.getNextSortingOrder() === "desc" && (
-                        // <Text>To desc</Text>
-                        <ChevronDownIcon />
-                      )}
-                    </Button>
-
-                    {header.column.getIsSorted() && (
-                      <Button
-                        onClick={(e) => {
-                          header.column.clearSorting();
-                        }}
-                      >
-                        <CloseIcon />
-                      </Button>
-                    )}
-                  </Flex>
-                )}
-              </>
-            );
-          })}
-        </>
-      ))}
-    </>
-  );
-};
-
-export default TableSorter;

package/src/components/TextCell.tsx

@@ -1,18 +0,0 @@
-import { Tooltip, Text } from "@chakra-ui/react";
-
-const TextCell = ({ label, children }: any) => {
-  return (
-    <Tooltip label={label}>
-      <Text
-        as="span"
-        overflow="hidden"
-        textOverflow={"ellipsis"}
-        noOfLines={[1, 2, 3]}
-      >
-        {children}
-      </Text>
-    </Tooltip>
-  );
-};
-
-export default TextCell;

package/src/components/useDataFromUrl.tsx

@@ -1,52 +0,0 @@
-import axios from "axios";
-import { useState, useEffect } from "react";
-
-interface useDataFromUrlReturn<T> {
-  data: T;
-  loading: boolean;
-  hasError: boolean;
-  refreshData: () => void;
-}
-
-interface useDataFromUrlProps<T> {
-  url: string;
-  params?: object;
-  defaultData: T;
-}
-
-const useDataFromUrl = <T,>({
-  url,
-  params = {},
-  defaultData,
-}: useDataFromUrlProps<T>): useDataFromUrlReturn<T> => {
-  const [loading, setLoading] = useState<boolean>(true);
-  const [hasError, setHasError] = useState<boolean>(false);
-  const [data, setData] = useState<T>(defaultData);
-  const refreshData = async () => {
-    await getData();
-  };
-
-  const getData = async () => {
-    try {
-      setLoading(true);
-      const { data } = await axios.get<T>(url, { params: params });
-      console.log("get DataFromUrl success", data);
-      setLoading(false);
-      setData(data);
-    } catch (e) {
-      console.log(e);
-      setLoading(false);
-      setHasError(true);
-    }
-  };
-
-  useEffect(() => {
-    getData().catch((e) => {
-      console.error(e);
-    });
-  }, []);
-
-  return { data, loading, hasError, refreshData };
-};
-
-export default useDataFromUrl;

package/src/components/useDataTable.tsx

@@ -1,7 +0,0 @@
-import { useContext } from "react";
-import { TableContext } from "./DataTableContext";
-
-export const useDataTable = () => {
-  const { table, refreshData } = useContext(TableContext);
-  return { table, refreshData };
-};

package/src/index.tsx

@@ -1,12 +0,0 @@
-export * from "./components/DataTable";
-export * from "./components/EditViewButton";
-export * from "./components/PageSizeControl";
-export * from "./components/ResetFilteringButton";
-export * from "./components/ResetSortingButton";
-export * from "./components/Table";
-export * from "./components/TableBody";
-export * from "./components/TableFilter";
-export * from "./components/TableFooter";
-export * from "./components/TableHeader";
-export * from "./components/TablePagination";
-export * from "./components/TextCell";

package/src/stories/CardViewShowcase.tsx

@@ -1,103 +0,0 @@
-// import React from 'react';
-import { ButtonGroup, ChakraProvider, theme } from "@chakra-ui/react";
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import DataTable from "../components/DataTable";
-import EditFilterButton from "../components/EditFilterButton";
-import EditSortingButton from "../components/EditSortingButton";
-import EditViewButton from "../components/EditViewButton";
-import PageSizeControl from "../components/PageSizeControl";
-import TableCardContainer from "../components/TableCardContainer";
-import TableCards from "../components/TableCards";
-import TablePagination from "../components/TablePagination";
-import TextCell from "../components/TextCell";
-
-interface ChatRecord {
-  session_id: string;
-  last_user_message: string;
-  last_system_response: string;
-  total_token: number;
-  total_prompt_tokens: number;
-  total_completion_tokens: number;
-  total_normalise_tokens: number;
-  chat_type: string;
-  model: string;
-  created_by: string;
-  last_update: string;
-}
-
-interface RowActionsProps {
-  row: ChatRecord;
-}
-
-const RowActions = ({ row }: RowActionsProps) => {
-  return <>no actions</>;
-};
-
-const CardViewShowcase = () => {
-  const columnHelper = createColumnHelper<ChatRecord>();
-
-  const columns: ColumnDef<ChatRecord>[] = [
-    // Display Column
-    columnHelper.display({
-      id: "actions",
-      header: () => <span>Actions</span>,
-      cell: (props) => <RowActions row={props.row.original} />,
-    }),
-
-    // Grouping Column
-    columnHelper.group({
-      header: "Information",
-      footer: (props) => props.column.id,
-      columns: [
-        columnHelper.accessor("session_id", {
-          cell: (props) => {
-            return <TextCell>{props.row.original.session_id}</TextCell>;
-          },
-          header: () => <span>Session Id</span>,
-          footer: (props) => props.column.id,
-        }),
-        columnHelper.accessor("last_user_message", {
-          cell: (props) => {
-            return <TextCell>{props.row.original.last_user_message}</TextCell>;
-          },
-
-          header: () => <span>User Message</span>,
-          footer: (props) => props.column.id,
-        }),
-        // Accessor Column
-        columnHelper.accessor("total_token", {
-          cell: (props) => {
-            return <TextCell>{props.row.original.total_token}</TextCell>;
-          },
-          header: () => <span>Total Token</span>,
-          footer: (props) => props.column.id,
-          sortDescFirst: false,
-        }),
-      ],
-    }),
-  ];
-
-  return (
-    <ChakraProvider theme={theme}>
-      <DataTable
-        columns={columns}
-        url={"http://localhost:8333/api/v1/gpt/chat/history/all"}
-      >
-        <TablePagination />
-        <ButtonGroup isAttached>
-          <EditViewButton />
-          <EditFilterButton />
-          <EditSortingButton />
-        </ButtonGroup>
-
-        <TableCardContainer>
-          <TableCards />
-        </TableCardContainer>
-        <PageSizeControl />
-        <TablePagination />
-      </DataTable>
-    </ChakraProvider>
-  );
-};
-
-export default CardViewShowcase;

package/src/stories/DataTable.stories.tsx

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import TableViewShowcase from "./TableViewShowcase";
-import CardViewShowcase from "./CardViewShowcase";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: "DataTable/TableView",
-  component: TableViewShowcase,
-  parameters: {
-  },
-  
-  argTypes: {
-  },
-
-} satisfies Meta<typeof TableViewShowcase>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const TableView: Story = {
-  render: () => {
-    return <TableViewShowcase />;
-  },
-};
-
-export const CardView = {
-  render: () => {
-    return <CardViewShowcase />;
-  },
-};

package/src/stories/TableViewShowcase.tsx

@@ -1,105 +0,0 @@
-// import React from 'react';
-import { ChakraProvider, theme } from "@chakra-ui/react";
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import DataTable from "../components/DataTable";
-import EditViewButton from "../components/EditViewButton";
-import PageSizeControl from "../components/PageSizeControl";
-import ResetFilteringButton from "../components/ResetFilteringButton";
-import ResetSortingButton from "../components/ResetSortingButton";
-import Table from "../components/Table";
-import TableBody from "../components/TableBody";
-import TableFilter from "../components/TableFilter";
-import TableFooter from "../components/TableFooter";
-import TableHeader from "../components/TableHeader";
-import TablePagination from "../components/TablePagination";
-import TextCell from "../components/TextCell";
-
-interface ChatRecord {
-  session_id: string;
-  last_user_message: string;
-  last_system_response: string;
-  total_token: number;
-  total_prompt_tokens: number;
-  total_completion_tokens: number;
-  total_normalise_tokens: number;
-  chat_type: string;
-  model: string;
-  created_by: string;
-  last_update: string;
-}
-
-interface RowActionsProps {
-  row: ChatRecord;
-}
-
-const RowActions = ({ row }: RowActionsProps) => {
-  return <>has no actions</>;
-};
-
-const TableViewShowcase = () => {
-  const columnHelper = createColumnHelper<ChatRecord>();
-
-  const columns: ColumnDef<ChatRecord>[] = [
-    // Display Column
-    columnHelper.display({
-      id: "actions",
-      header: () => <span>Actions</span>,
-      cell: (props) => <RowActions row={props.row.original} />,
-    }),
-
-    // Grouping Column
-    columnHelper.group({
-      header: "Information",
-      footer: (props) => props.column.id,
-      columns: [
-        columnHelper.accessor("session_id", {
-          cell: (props) => {
-            return <TextCell>{props.row.original.session_id}</TextCell>;
-          },
-          header: () => <span>Session Id</span>,
-          footer: (props) => props.column.id,
-        }),
-        columnHelper.accessor("last_user_message", {
-          cell: (props) => {
-            return <TextCell>{props.row.original.last_user_message}</TextCell>;
-          },
-
-          header: () => <span>User Message</span>,
-          footer: (props) => props.column.id,
-        }),
-        // Accessor Column
-        columnHelper.accessor("total_token", {
-          cell: (props) => {
-            return <TextCell>{props.row.original.total_token}</TextCell>;
-          },
-          header: () => <span>Total Token</span>,
-          footer: (props) => props.column.id,
-          sortDescFirst: false,
-        }),
-      ],
-    }),
-  ];
-
-  return (
-    <ChakraProvider theme={theme}>
-      <DataTable
-        columns={columns}
-        url={"http://localhost:8333/api/v1/gpt/chat/history/all"}
-      >
-        <EditViewButton />
-        <ResetSortingButton />
-        <TableFilter />
-        <ResetFilteringButton />
-        <Table>
-          <TableHeader />
-          <TableBody />
-          <TableFooter />
-        </Table>
-        <PageSizeControl />
-        <TablePagination />
-      </DataTable>
-    </ChakraProvider>
-  );
-};
-
-export default TableViewShowcase;

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "outDir": "./dist/types",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,7 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-});