stories added

Author: jeevasusej

stories/ServerSide.stories.tsx

@@ -68,7 +68,7 @@ export const ServerSidePagination: Story = {
 
         <TableAdapter
           data={data}
-          columns={columns}
+          columns={columns as any}
           pageCount={Math.ceil(totalRows / pagination.pageSize)}
           manualPagination={true}
           enablePagination={true}
@@ -84,6 +84,62 @@ export const ServerSidePagination: Story = {
   },
 };
 
+/**
+ * A table with server-side pagination (no loader).
+ */
+export const ServerSidePaginationNoLoader: Story = {
+  render: () => {
+    const [data, setData] = useState<Person[]>([]);
+    const [pagination, setPagination] = useState<PaginationState>({
+      pageIndex: 0,
+      pageSize: 10,
+    });
+    const [totalRows, setTotalRows] = useState(0);
+
+    // Simulate a server-side API call (no loading state)
+    useEffect(() => {
+      // Simulate API delay
+      const timer = setTimeout(() => {
+        const startIndex = pagination.pageIndex * pagination.pageSize;
+        const endIndex = startIndex + pagination.pageSize;
+        const paginatedData = hugeDataSet.slice(startIndex, endIndex);
+
+        setData(paginatedData);
+        setTotalRows(hugeDataSet.length);
+      }, 500);
+
+      return () => clearTimeout(timer);
+    }, [pagination.pageIndex, pagination.pageSize]);
+
+    return (
+      <div className="w-full max-w-4xl">
+        <div className="bg-gray-50 p-4 mb-4 rounded text-sm">
+          <p>
+            This example demonstrates server-side pagination{" "}
+            <b>without any loader</b>.
+          </p>
+          <p>Current page: {pagination.pageIndex + 1}</p>
+          <p>Page size: {pagination.pageSize}</p>
+          <p>Total rows: {totalRows}</p>
+        </div>
+
+        <TableAdapter
+          data={data}
+          columns={columns as any}
+          pageCount={Math.ceil(totalRows / pagination.pageSize)}
+          manualPagination={true}
+          enablePagination={true}
+          pageIndex={pagination.pageIndex}
+          pageSize={pagination.pageSize}
+          onPaginationChange={setPagination}
+          totalRowCount={totalRows}
+          className="w-full"
+        />
+      </div>
+    );
+  },
+};
+
 /**
  * A table with server-side pagination and sorting.
  */
@@ -165,7 +221,7 @@ export const ServerSidePaginationAndSorting: Story = {
 
         <TableAdapter
           data={data}
-          columns={columns}
+          columns={columns as any}
           pageCount={Math.ceil(totalRows / pagination.pageSize)}
           manualPagination={true}
           manualSorting={true}
@@ -287,7 +343,7 @@ export const ServerSideComplete: Story = {
 
         <TableAdapter
           data={data}
-          columns={columns}
+          columns={columns as any}
           pageCount={Math.ceil(totalRows / pagination.pageSize)}
           manualPagination={true}
           manualSorting={true}

stories/TableAdapter.stories.tsx

@@ -148,18 +148,33 @@ export const WithGlobalFilter: Story = {
 export const WithRowSelection: Story = {
   render: (args) => {
     const [rowSelection, setRowSelection] = React.useState({});
+    // Get selected rows' data
+    const selectedRows = React.useMemo(() => {
+      if (!args.data) return [];
+      return Object.keys(rowSelection)
+        .map((rowId) => args.data[parseInt(rowId, 10)])
+        .filter(Boolean);
+    }, [rowSelection, args.data]);
 
     return (
       <div className="space-y-4 w-full max-w-4xl">
+        <style>{`.selected { background-color: #dbeafe !important; }`}</style>
         <div className="p-4 bg-gray-50 rounded">
           <p className="text-sm text-gray-700">
             Selected rows: {Object.keys(rowSelection).length}
           </p>
+          <pre className="text-xs bg-gray-100 rounded p-2 mt-2 overflow-x-auto">
+            {JSON.stringify(selectedRows, null, 2)}
+          </pre>
         </div>
         <TableAdapter
           {...args}
           rowSelection={rowSelection}
           onRowSelectionChange={setRowSelection}
+          classNames={{
+            ...args.classNames,
+            tbodyRow: "transition-colors",
+          }}
         />
       </div>
     );
@@ -188,7 +203,7 @@ export const WithRowSelection: Story = {
         ),
         size: 40,
       },
-      ...columns,
+      ...(columns as any),
     ],
   },
 };
@@ -248,10 +263,9 @@ export const CompleteExample: Story = {
         ),
         size: 40,
       },
-      ...columns,
+      ...(columns as any),
     ],
     className: "w-full",
-    tableClassName: "min-w-full divide-y divide-gray-200",
     enablePagination: true,
     enableSorting: true,
     enableMultiSort: true,