Merge pull request #8 from TechFusionMasters/development

Removed server side pagination story and default pagination added

Author: jeevasusej

.storybook/preview.ts

@@ -3,6 +3,12 @@ import "../stories/tailwind.css";
 
 const preview: Preview = {
   parameters: {
+    docs: {
+      source: {
+        state: 'open',
+        copyButton: true
+      }
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

src/hooks.ts

@@ -304,7 +304,9 @@ export function useServerSideData<TData extends object>(
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<TData[]>([]);
   const [pageCount, setPageCount] = useState(0);
-  const [totalRowCount, setTotalRowCount] = useState(0);
+  const [totalRowCount, setTotalRowCount] = useState<number | undefined>(
+    undefined
+  );
   const [error, setError] = useState<Error | null>(null);
 
   const fetchData = useCallback(

stories/Pagination.stories.tsx

@@ -174,88 +174,6 @@ export const CustomPageSizes: Story = {
   },
 };
 
-/**
- * Example demonstrating server-side pagination with manual control.
- * Shows how to integrate with backend API for pagination.
- */
-export const ServerSidePagination: Story = {
-  render: (args) => {
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [data, setData] = React.useState(args.data.slice(0, 10));
-    const [pageCount, setPageCount] = React.useState(
-      Math.ceil(args.data.length / 10)
-    );
-    const [totalRowCount, setTotalRowCount] = React.useState(args.data.length);
-
-    // Simulate server-side pagination
-    const fetchData = React.useCallback(
-      async <TData extends object>({
-        pagination,
-        sorting,
-        filters,
-        globalFilter,
-      }: {
-        pagination: PaginationState;
-        sorting: SortingState;
-        filters: ColumnFiltersState;
-        globalFilter: string;
-      }): Promise<{
-        data: TData[];
-        pageCount: number;
-        totalRowCount: number;
-      }> => {
-        setIsLoading(true);
-
-        // Simulate API call
-        await new Promise((resolve) => setTimeout(resolve, 500));
-
-        const { pageIndex, pageSize } = pagination;
-        const start = pageIndex * pageSize;
-        const end = start + pageSize;
-
-        // For demo, use args.data and cast to TData[]
-        const pageData = args.data.slice(start, end) as TData[];
-
-        setData(pageData as Person[]); // For local state
-        setIsLoading(false);
-        setTotalRowCount(args.data.length);
-
-        return {
-          data: pageData,
-          pageCount: Math.ceil(args.data.length / pageSize),
-          totalRowCount: args.data.length,
-        };
-      },
-      [args.data]
-    );
-
-    return (
-      <TableAdapter
-        {...args}
-        data={data}
-        loading={{
-          isLoading: isLoading,
-          isPaginationLoading: isLoading,
-        }}
-        server={{
-          manualPagination: true,
-          pageCount: pageCount,
-          fetchData: fetchData,
-        }}
-        totalRowCount={totalRowCount}
-      />
-    );
-  },
-  args: {
-    data: largeDataSet,
-    columns: columns as ColumnDef<Person>[],
-    features: {
-      pagination: true,
-    },
-    className: "w-full max-w-4xl",
-  },
-};
-
 /**
  * Shows pagination with loading states.
  * Demonstrates how loading indicators are displayed during pagination.

stories/TableAdapter.stories.tsx

@@ -347,6 +347,7 @@ export const CustomStyling: Story = {
   args: {
     data: smallDataSet,
     columns: columns as ColumnDef<Person>[],
+    pageSize: 4,
     styling: {
       className: "w-full max-w-4xl shadow-lg rounded-lg overflow-hidden",
       classNames: {