@bsol-oss/react-datatable5 1.0.5 → 1.0.6

package/src/components/EditViewButton.tsx

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

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

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

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

@@ -1,20 +0,0 @@
-import { ReactNode } from "react";
-import { Table as ChakraTable, Container } from "@chakra-ui/react";
-import { useDataTable } from "./useDataTable";
-
-export 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

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

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

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

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

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

@@ -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";