@bsol-oss/react-datatable5 1.0.2 → 1.0.4

package/dist/index.js

@@ -11,7 +11,7 @@ var md = require('react-icons/md');
 var icons = require('@chakra-ui/icons');
 
 const TableContext = react.createContext({
-    table: undefined,
+    table: {},
     refreshData: () => { },
 });
 
@@ -44,7 +44,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
     return { data, loading, hasError, refreshData };
 };
 
-const DataTable = ({ columns, url, children }) => {
+const DataTable = ({ columns, url, children, }) => {
     const [sorting, setSorting] = react.useState([]);
     const [columnFilters, setColumnFilters] = react.useState([]); // can set initial column filter state here
     const [pagination, setPagination] = react.useState({
@@ -190,7 +190,7 @@ const TableHeader = ({ canResize }) => {
             }) }, crypto.randomUUID()))) }));
 };
 
-const TablePagination = (props) => {
+const TablePagination = ({}) => {
     const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
     return (jsxRuntime.jsxs(react$1.ButtonGroup, { isAttached: true, children: [jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdFirstPage, {}), onClick: () => firstPage(), disabled: !getCanPreviousPage(), "aria-label": "first-page" }), jsxRuntime.jsx(react$1.IconButton, { icon: jsxRuntime.jsx(md.MdArrowBack, {}), onClick: () => previousPage(), disabled: !getCanPreviousPage(), "aria-label": "previous-page" }), jsxRuntime.jsx(react$1.Button, { onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => nextPage(), disabled: !getCanNextPage(), "aria-label": "next-page", children: jsxRuntime.jsx(md.MdArrowForward, {}) }), jsxRuntime.jsx(react$1.IconButton, { onClick: () => lastPage(), disabled: !getCanNextPage(), "aria-label": "last-page", children: jsxRuntime.jsx(md.MdLastPage, {}) })] }));
 };

package/dist/types/components/DataTable.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { Column } from "@tanstack/react-table";
+export interface DataTableProps<T> {
+    children: ReactNode;
+    url: string;
+    columns: Column<T>[];
+}
+export interface Result<T> {
+    results: T[];
+}
+export interface DataResponse<T> extends Result<T> {
+    success: boolean;
+    count: number;
+    filterCount: number;
+}
+declare const DataTable: <TData>({ columns, url, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/dist/types/components/DataTableContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+interface DataTableContext<T> {
+    table: Table<T>;
+    refreshData: () => void;
+}
+export declare const TableContext: import("react").Context<DataTableContext<any>>;
+export {};

package/dist/types/components/EditFilterButton.d.ts

@@ -0,0 +1,2 @@
+declare const EditFilterButton: () => import("react/jsx-runtime").JSX.Element;
+export default EditFilterButton;

package/dist/types/components/EditSortingButton.d.ts

@@ -0,0 +1,2 @@
+declare const EditSortingButton: () => import("react/jsx-runtime").JSX.Element;
+export default EditSortingButton;

package/dist/types/components/EditViewButton.d.ts

@@ -0,0 +1,2 @@
+declare const EditViewButton: () => import("react/jsx-runtime").JSX.Element;
+export default EditViewButton;

package/dist/types/components/PageSizeControl.d.ts

@@ -0,0 +1,5 @@
+export interface PageSizeControlProps {
+    pageSizes?: number[];
+}
+declare const PageSizeControl: ({ pageSizes, }: PageSizeControlProps) => import("react/jsx-runtime").JSX.Element;
+export default PageSizeControl;

package/dist/types/components/ResetFilteringButton.d.ts

@@ -0,0 +1,2 @@
+declare const ResetFilteringButton: () => import("react/jsx-runtime").JSX.Element;
+export default ResetFilteringButton;

package/dist/types/components/ResetSortingButton.d.ts

@@ -0,0 +1,2 @@
+declare const ResetSortingButton: () => import("react/jsx-runtime").JSX.Element;
+export default ResetSortingButton;

package/dist/types/components/Table.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface TableProps {
+    children: ReactNode;
+}
+declare const Table: ({ children }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/types/components/TableBody.d.ts

@@ -0,0 +1,2 @@
+declare const TableBody: () => import("react/jsx-runtime").JSX.Element;
+export default TableBody;

package/dist/types/components/TableCardContainer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface TableCardContainerProps {
+    children: JSX.Element;
+}
+declare const TableCardContainer: ({ children, ...props }: TableCardContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default TableCardContainer;

package/dist/types/components/TableCards.d.ts

@@ -0,0 +1,2 @@
+declare const TableCards: () => import("react/jsx-runtime").JSX.Element;
+export default TableCards;

package/dist/types/components/TableFilter.d.ts

@@ -0,0 +1,2 @@
+declare const TableFilter: () => import("react/jsx-runtime").JSX.Element;
+export default TableFilter;

package/dist/types/components/TableFooter.d.ts

@@ -0,0 +1,2 @@
+export declare const TableFooter: () => import("react/jsx-runtime").JSX.Element;
+export default TableFooter;

package/dist/types/components/TableHeader.d.ts

@@ -0,0 +1,5 @@
+export interface TableHeaderProps {
+    canResize?: boolean;
+}
+declare const TableHeader: ({ canResize }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TableHeader;

package/dist/types/components/TablePagination.d.ts

@@ -0,0 +1,4 @@
+export interface PaginationProps {
+}
+declare const TablePagination: ({}: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default TablePagination;

package/dist/types/components/TableSorter.d.ts

@@ -0,0 +1,2 @@
+declare const TableSorter: () => import("react/jsx-runtime").JSX.Element;
+export default TableSorter;

package/dist/types/components/TextCell.d.ts

@@ -0,0 +1,2 @@
+declare const TextCell: ({ label, children }: any) => import("react/jsx-runtime").JSX.Element;
+export default TextCell;

package/dist/types/components/useDataFromUrl.d.ts

@@ -0,0 +1,13 @@
+interface useDataFromUrlReturn<T> {
+    data: T;
+    loading: boolean;
+    hasError: boolean;
+    refreshData: () => void;
+}
+interface useDataFromUrlProps<T> {
+    url: string;
+    params?: object;
+    defaultData: T;
+}
+declare const useDataFromUrl: <T>({ url, params, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
+export default useDataFromUrl;

package/dist/types/components/useDataTable.d.ts

@@ -0,0 +1,4 @@
+export declare const useDataTable: () => {
+    table: import("@tanstack/table-core").Table<any>;
+    refreshData: () => void;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    DataTable: <TData>({ columns, url, children, }: import("./components/DataTable").DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+    EditViewButton: () => import("react/jsx-runtime").JSX.Element;
+    PageSizeControl: ({ pageSizes, }: import("./components/PageSizeControl").PageSizeControlProps) => import("react/jsx-runtime").JSX.Element;
+    ResetFilteringButton: () => import("react/jsx-runtime").JSX.Element;
+    ResetSortingButton: () => import("react/jsx-runtime").JSX.Element;
+    Table: ({ children }: import("./components/Table").TableProps) => import("react/jsx-runtime").JSX.Element;
+    TableBody: () => import("react/jsx-runtime").JSX.Element;
+    TableFilter: () => import("react/jsx-runtime").JSX.Element;
+    TableFooter: () => import("react/jsx-runtime").JSX.Element;
+    TableHeader: ({ canResize }: import("./components/TableHeader").TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    TablePagination: ({}: import("./components/TablePagination").PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    TextCell: ({ label, children }: any) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;

package/dist/types/stories/CardViewShowcase.d.ts

@@ -0,0 +1,2 @@
+declare const CardViewShowcase: () => import("react/jsx-runtime").JSX.Element;
+export default CardViewShowcase;

package/dist/types/stories/DataTable.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TableView: Story;
+export declare const CardView: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/types/stories/TableViewShowcase.d.ts

@@ -0,0 +1,2 @@
+declare const TableViewShowcase: () => import("react/jsx-runtime").JSX.Element;
+export default TableViewShowcase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "dist/index.js",
   "repository": "https://github.com/bsol-oss/react-datatable5.git",
@@ -13,6 +13,13 @@
     "@chakra-ui/react",
     "react-icons"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "rollup -c",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

package/src/components/DataTable.tsx

@@ -16,22 +16,37 @@ import {
   Column,
 } from "@tanstack/react-table";
 import useDataFromUrl from "./useDataFromUrl";
-import { Container, Table } from "@chakra-ui/react";
 
-interface DataTableProps {
+export interface DataTableProps<T> {
   children: ReactNode;
   url: string;
-  columns: Column[];
+  columns: Column<T>[];
 }
 
-const DataTable = ({ columns, url, children }: DataTableProps) => {
+export interface Result<T> {
+  results: T[];
+}
+
+export interface DataResponse<T> extends Result<T> {
+  success: boolean;
+  count: number;
+  filterCount: number;
+}
+
+const DataTable = <TData,>({
+  columns,
+  url,
+  children,
+}: DataTableProps<TData>) => {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); // can set initial column filter state here
   const [pagination, setPagination] = useState({
     pageIndex: 0, //initial page index
     pageSize: 10, //default page size
   });
-  const { data, loading, hasError, refreshData } = useDataFromUrl({
+  const { data, loading, hasError, refreshData } = useDataFromUrl<
+    DataResponse<TData>
+  >({
     url: url,
     defaultData: {
       success: false,
@@ -47,18 +62,18 @@ const DataTable = ({ columns, url, children }: DataTableProps) => {
       sorting: JSON.stringify(
         sorting.length > 0
           ? { field: sorting[0].id, sort: sorting[0].desc ? "desc" : "asc" }
-          : {},
+          : {}
       ),
       where: JSON.stringify(
         columnFilters.reduce((accumulator, filter) => {
           const obj: any = {};
           obj[filter.id] = filter.value;
           return { ...accumulator, ...obj };
-        }, {}),
+        }, {})
       ),
     },
   });
-  const table = useReactTable({
+  const table = useReactTable<TData>({
     data: data.results,
     columns: columns,
     getCoreRowModel: getCoreRowModel(),

package/src/components/DataTableContext.tsx

@@ -2,12 +2,11 @@ import { Table } from "@tanstack/react-table";
 import { createContext } from "react";
 
 interface DataTableContext<T> {
-  // tableWidth: number;
-  // setTableWidth: (num: number) => void;
   table: Table<T>;
+  refreshData: () => void;
 }
 
 export const TableContext = createContext<DataTableContext<any>>({
-  table: undefined,
+  table: {} as Table<any>,
   refreshData: () => {},
 });

package/src/components/Table.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { Table as ChakraTable, Container } from "@chakra-ui/react";
 import { useDataTable } from "./useDataTable";
 
-interface TableProps {
+export interface TableProps {
   children: ReactNode;
 }
 

package/src/components/TableHeader.tsx

@@ -11,7 +11,7 @@ import {
 } from "@chakra-ui/icons";
 import { useDataTable } from "./useDataTable";
 
-interface TableHeaderProps {
+export interface TableHeaderProps {
   canResize?: boolean;
 }
 

package/src/components/TablePagination.tsx

@@ -7,8 +7,9 @@ import {
 } from "react-icons/md";
 import { useDataTable } from "./useDataTable";
 
-interface PaginationProps {}
-const TablePagination = (props: PaginationProps) => {
+export interface PaginationProps {}
+
+const TablePagination = ({}: PaginationProps) => {
   const {
     firstPage,
     getCanPreviousPage,

package/src/stories/DataTable.stories.tsx

@@ -1,57 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import DefaultDataTable from "./DefaultDataTable";
+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: "Example/obsolete/table",
-  component: DefaultDataTable,
+  title: "DataTable/TableView",
+  component: TableViewShowcase,
   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 DefaultDataTable>;
+
+} satisfies Meta<typeof TableViewShowcase>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const TableView: Story = {
   render: () => {
-    return <DefaultDataTable />;
+    return <TableViewShowcase />;
   },
 };
 
-// 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',
-//   },
-// };
+export const CardView = {
+  render: () => {
+    return <CardViewShowcase />;
+  },
+};

package/tsconfig.json

@@ -1,11 +1,13 @@
 {
   "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,
@@ -13,7 +15,6 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,