@bsol-oss/react-datatable5 1.0.0

package/src/components/EditViewButton.tsx

@@ -0,0 +1,46 @@
+import { useContext } from "react";
+import { TableContext } from "./DataTableContext";
+import {
+  Checkbox,
+  Flex,
+  FormControl,
+  IconButton,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from "@chakra-ui/react";
+import { IoMdEye } from "react-icons/io";
+
+const EditViewButton = () => {
+  const { table } = useContext(TableContext);
+  return (
+    <Popover placement="bottom-end">
+      <PopoverTrigger>
+        <IconButton aria-label="view" icon={<IoMdEye />} />
+      </PopoverTrigger>
+      <PopoverContent width={"auto"}>
+        <PopoverArrow />
+        <PopoverBody>
+          <Flex flexFlow={"column"} gap={"1rem"}>
+            {table.getAllLeafColumns().map((column) => {
+              return (
+                <FormControl key={crypto.randomUUID()} width={"auto"}>
+                  <Checkbox
+                    isChecked={column.getIsVisible()}
+                    onChange={column.getToggleVisibilityHandler()}
+                  >
+                    {column.id}
+                  </Checkbox>
+                </FormControl>
+              );
+            })}
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default EditViewButton;

package/src/components/PageSizeControl.tsx

@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import { TableContext } from "./DataTableContext";
+
+export interface PageSizeControlProps {
+  pageSizes?: number[];
+}
+
+const PageSizeControl = ({
+  pageSizes = [10, 20, 30, 40, 50],
+}: PageSizeControlProps) => {
+  const { table } = useContext(TableContext);
+
+  return (
+    <select
+      value={table.getState().pagination.pageSize}
+      onChange={(e) => {
+        table.setPageSize(Number(e.target.value));
+      }}
+    >
+      {pageSizes.map((pageSize) => (
+        <option key={pageSize} value={pageSize}>
+          {pageSize}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default PageSizeControl;

package/src/components/ResetFilteringButton.tsx

@@ -0,0 +1,18 @@
+import { useContext } from "react";
+import { TableContext } from "./DataTableContext";
+import { Button } from "@chakra-ui/react";
+
+const ResetFilteringButton = () => {
+  const { table } = useContext(TableContext);
+  return (
+    <Button
+      onClick={() => {
+        table.resetColumnFilters();
+      }}
+    >
+      Reset Filtering
+    </Button>
+  );
+};
+
+export default ResetFilteringButton;

package/src/components/ResetSortingButton.tsx

@@ -0,0 +1,18 @@
+import { useContext } from "react";
+import { TableContext } from "./DataTableContext";
+import { Button } from "@chakra-ui/react";
+
+const ResetSortingButton = () => {
+  const { table } = useContext(TableContext);
+  return (
+    <Button
+      onClick={() => {
+        table.resetSorting();
+      }}
+    >
+      Reset Sorting
+    </Button>
+  );
+};
+
+export default ResetSortingButton;

package/src/components/Table.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { Table as ChakraTable, Container } from "@chakra-ui/react";
+import { useDataTable } from "./useDataTable";
+
+interface TableProps {
+  children: ReactNode;
+}
+
+const Table = ({ children }: TableProps) => {
+  const { table } = useDataTable();
+  return (
+    <Container maxW="100%" overflowY={"scroll"}>
+      <ChakraTable width={table.getCenterTotalSize()} variant="simple">
+        {children}
+      </ChakraTable>
+    </Container>
+  );
+};
+
+export default Table;

package/src/components/TableBody.tsx

@@ -0,0 +1,23 @@
+import { Tbody, Td, Tr } from "@chakra-ui/table";
+import { flexRender } from "@tanstack/react-table";
+import { useContext } from "react";
+import { TableContext } from "./DataTableContext";
+
+const TableBody = () => {
+  const { table } = useContext(TableContext);
+  return (
+    <Tbody>
+      {table.getRowModel().rows.map((row) => (
+        <Tr key={crypto.randomUUID()}>
+          {row.getVisibleCells().map((cell) => (
+            <Td key={crypto.randomUUID()} width={`${cell.column.getSize()}px`}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </Td>
+          ))}
+        </Tr>
+      ))}
+    </Tbody>
+  );
+};
+
+export default TableBody;

package/src/components/TableCardContainer.tsx

@@ -0,0 +1,22 @@
+import { Grid } from "@chakra-ui/react";
+
+interface TableCardContainerProps {
+  children: JSX.Element;
+}
+
+const TableCardContainer = ({
+  children,
+  ...props
+}: TableCardContainerProps) => {
+  return (
+    <Grid
+      gridTemplateColumns={["1fr", "1fr 1fr", "1fr 1fr 1fr"]}
+      gap={"0.5rem"}
+      {...props}
+    >
+      {children}
+    </Grid>
+  );
+};
+
+export default TableCardContainer;

package/src/components/TableCards.tsx

@@ -0,0 +1,36 @@
+import { Card, CardBody, Text, Box } from "@chakra-ui/react";
+import { flexRender } from "@tanstack/react-table";
+import { useContext } from "react";
+import { TableContext } from "./DataTableContext";
+
+const TableCards = () => {
+  const { table } = useContext(TableContext);
+
+  return (
+    <>
+      {table.getRowModel().rows.map((row) => {
+        return (
+          <Card key={crypto.randomUUID()}>
+            <CardBody display={"flex"} flexFlow={"column"} gap={"0.5rem"}>
+              {row.getVisibleCells().map((cell) => {
+                return (
+                  <Box>
+                    <Text>{`${cell.column.id}: `}</Text>
+                    <Box>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </Box>
+                  </Box>
+                );
+              })}
+            </CardBody>
+          </Card>
+        );
+      })}
+    </>
+  );
+};
+
+export default TableCards;

package/src/components/TableFilter.tsx

@@ -0,0 +1,34 @@
+import { Input, Text, Box } from "@chakra-ui/react";
+import { useDataTable } from "./useDataTable";
+
+const TableFilter = () => {
+  const { table } = useDataTable();
+
+  return (
+    <>
+      {table.getLeafHeaders().map((header) => {
+        return (
+          <>
+            {header.column.getCanFilter() && (
+              <Box>
+                <Text>{header.column.id}</Text>
+                <Input
+                  value={
+                    header.column.getFilterValue()
+                      ? String(header.column.getFilterValue())
+                      : ""
+                  }
+                  onChange={(e) => {
+                    header.column.setFilterValue(e.target.value);
+                  }}
+                />
+              </Box>
+            )}
+          </>
+        );
+      })}
+    </>
+  );
+};
+
+export default TableFilter;

package/src/components/TableFooter.tsx

@@ -0,0 +1,27 @@
+import { Tfoot, Th, Tr } from "@chakra-ui/react";
+import { useDataTable } from "./useDataTable";
+import { flexRender } from "@tanstack/react-table";
+
+export const TableFooter = () => {
+  const table = useDataTable().table;
+  return (
+    <Tfoot>
+      {table.getFooterGroups().map((footerGroup) => (
+        <Tr key={crypto.randomUUID()}>
+          {footerGroup.headers.map((header) => (
+            <Th key={crypto.randomUUID()} colSpan={header.colSpan}>
+              {header.isPlaceholder
+                ? null
+                : flexRender(
+                    header.column.columnDef.footer,
+                    header.getContext(),
+                  )}
+            </Th>
+          ))}
+        </Tr>
+      ))}
+    </Tfoot>
+  );
+};
+
+export default TableFooter;

package/src/components/TableHeader.tsx

@@ -0,0 +1,106 @@
+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";
+
+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

@@ -0,0 +1,57 @@
+import { Button, ButtonGroup, IconButton } from "@chakra-ui/react";
+import {
+  MdArrowBack,
+  MdArrowForward,
+  MdFirstPage,
+  MdLastPage,
+} from "react-icons/md";
+import { useDataTable } from "./useDataTable";
+
+interface PaginationProps {}
+const TablePagination = (props: 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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,52 @@
+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

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

package/src/index.tsx

@@ -0,0 +1,27 @@
+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";
+
+export {
+  DataTable,
+  EditViewButton,
+  PageSizeControl,
+  ResetFilteringButton,
+  ResetSortingButton,
+  Table,
+  TableBody,
+  TableFilter,
+  TableFooter,
+  TableHeader,
+  TablePagination,
+  TextCell,
+};

package/src/stories/Button.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button } from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Example/Button",
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: "Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: "Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    label: "Button",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    label: "Button",
+  },
+};