Feat/table

.storybook/main.ts

@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
     'storybook-addon-next-router',
+    '@storybook/addon-viewport',
   ],
   framework: {
     name: '@storybook/nextjs',

.storybook/manager.css

@@ -0,0 +1,4 @@
+#storybook-root {
+    width: 100% !important;
+  }
+

.storybook/preview.css

@@ -0,0 +1,3 @@
+#storybook-root, .sb-show-main {
+  width: 100% !important;
+}

.storybook/preview.tsx

@@ -1,10 +1,8 @@
-import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react';
 import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import React, { useEffect } from 'react';
 
-import { DesktopColorModeButton } from '../src/app/_components/NavBar/DesktopColorModeButton';
 import { Providers } from '../src/app/_components/Providers';
 import {
   instrumentSans,
@@ -13,6 +11,7 @@ import {
   matterRegular,
   openSauce,
 } from '../src/common/fonts';
+import './preview.css';
 
 const preview: Preview = {
   globalTypes: {
@@ -67,7 +66,7 @@ const preview: Preview = {
           <main
             className={`${inter.variable} ${instrumentSans.variable} ${openSauce.variable} ${matterRegular.variable} ${matterMonoRegular.variable}`}
           >
-            <Story />
+            <Story w="100%" className="preview-story" />
           </main>
         </Providers>
       );

package.json

@@ -58,6 +58,7 @@
     "@stacks/transactions": "6.15.1-pr.0bcf867e.0+0bcf867e",
     "@storybook/addon-themes": "^8.4.7",
     "@tanstack/react-query": "5.8.4",
+    "@tanstack/react-table": "8.21.2",
     "@tippyjs/react": "4.2.6",
     "@types/cookie": "0.5.2",
     "@types/react-redux": "7.1.26",
@@ -133,6 +134,7 @@
     "@storybook/addon-interactions": "8.3.5",
     "@storybook/addon-links": "8.3.5",
     "@storybook/addon-onboarding": "8.3.5",
+    "@storybook/addon-viewport": "^8.5.6",
     "@storybook/blocks": "8.3.5",
     "@storybook/experimental-nextjs-vite": "8.5.2",
     "@storybook/nextjs": "8.3.5",

src/app/PageClient.tsx

@@ -8,10 +8,8 @@ import { ReactNode } from 'react';
 import { DEFAULT_LIST_LIMIT_SMALL } from '../common/constants/constants';
 import { useGlobalContext } from '../common/context/useGlobalContext';
 import { TxListTabs } from '../features/txs-list/tabs/TxListTabs';
-import { HomePageBlockListSkeleton } from './_components/BlockList/Grouped/skeleton';
 import { PageTitle } from './_components/PageTitle';
 import { Stats } from './_components/Stats/Stats';
-import HomePageSkeleton from './skeleton';
 
 const HomePageBlockListDynamic = dynamic(
   () =>

src/app/_components/NewFooter.tsx

@@ -105,7 +105,7 @@ const TopFooterContent = () => {
       <Box hideFrom="lg" className="top-footer-content-hide-from-lg">
         <Grid templateColumns={['repeat(2, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)']} gap={4}>
           {rightSideLinks.concat(leftSideLinks).map(link => (
-            <ExplorerLink href={link.href} fontWeight="medium" fontSize="xs">
+            <ExplorerLink key={link.label} href={link.href} fontWeight="medium" fontSize="xs">
               {link.label}
             </ExplorerLink>
           ))}

src/app/transactions/PageClient.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import { TxListTabs } from '@/features/txs-list/tabs/TxListTabs';
 import { Flex } from '@chakra-ui/react';
 
 import { TokenPrice } from '../../common/types/tokenPrice';
-import { TxListTabs } from '../../features/txs-list/tabs/TxListTabs';
 import { PageTitle } from '../_components/PageTitle';
 import { FilterProps } from '../search/filters';
 import { MempoolFeeStatsWithErrorBoundary } from './MempoolFeeStats';

src/common/components/table/Table.test.tsx

@@ -0,0 +1,174 @@
+import { Column, ColumnDef } from '@tanstack/react-table';
+
+import { getColumnPinningState, getCommonPinningStyles } from './Table';
+
+describe('getCommonPinningStyles', () => {
+  const createMockColumn = (isPinned: 'left' | 'right' | false, isLastColumn: boolean = false) => {
+    return {
+      getIsPinned: () => isPinned,
+      getIsLastColumn: (side: string) => isLastColumn && side === 'left',
+      getStart: (side: string) => 100,
+      getAfter: (side: string) => 200,
+    } as unknown as Column<any>;
+  };
+
+  it('returns empty object when column is not pinned', () => {
+    const column = createMockColumn(false);
+    const styles = getCommonPinningStyles(column);
+    expect(styles).toEqual({});
+  });
+
+  it('returns correct styles for left pinned column', () => {
+    const column = createMockColumn('left');
+    const styles = getCommonPinningStyles(column);
+
+    expect(styles).toEqual({
+      bg: 'surface',
+      left: '100px',
+      right: undefined,
+      opacity: 1,
+      position: 'sticky',
+      zIndex: 1,
+    });
+  });
+
+  it('returns correct styles for right pinned column', () => {
+    const column = createMockColumn('right');
+    const styles = getCommonPinningStyles(column);
+
+    expect(styles).toEqual({
+      bg: 'surface',
+      left: undefined,
+      right: '200px',
+      opacity: 1,
+      position: 'sticky',
+      zIndex: 1,
+    });
+  });
+
+  it('includes additional styles for last left pinned column', () => {
+    const column = createMockColumn('left', true);
+    const styles = getCommonPinningStyles(column);
+
+    expect(styles).toEqual({
+      bg: 'surface',
+      left: '100px',
+      right: undefined,
+      opacity: 1,
+      position: 'sticky',
+      zIndex: 1,
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: '2px',
+        height: 'full',
+        backgroundColor: 'redesignBorderPrimary',
+      },
+      'td&:first-of-type::before': {
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        top: '-8px',
+        width: '2px',
+        height: 'calc(100% + 8px)',
+        backgroundColor: 'redesignBorderPrimary',
+      },
+    });
+  });
+});
+
+describe('getColumnPinningState', () => {
+  it('returns empty arrays when no columns are pinned', () => {
+    const columns: ColumnDef<any>[] = [
+      {
+        id: 'col1',
+        header: 'Column 1',
+      },
+      {
+        id: 'col2',
+        header: 'Column 2',
+      },
+    ];
+
+    const pinningState = getColumnPinningState(columns);
+    expect(pinningState).toEqual({ left: [], right: [] });
+  });
+
+  it('correctly identifies left and right pinned columns', () => {
+    const columns: ColumnDef<any>[] = [
+      {
+        id: 'col1',
+        header: 'Column 1',
+        meta: { isPinned: 'left' },
+      },
+      {
+        id: 'col2',
+        header: 'Column 2',
+      },
+      {
+        id: 'col3',
+        header: 'Column 3',
+        meta: { isPinned: 'right' },
+      },
+      {
+        id: 'col4',
+        header: 'Column 4',
+        meta: { isPinned: 'left' },
+      },
+    ];
+
+    const pinningState = getColumnPinningState(columns);
+    expect(pinningState).toEqual({
+      left: ['col1', 'col4'],
+      right: ['col3'],
+    });
+  });
+
+  it('skips columns without IDs', () => {
+    const columns: ColumnDef<any>[] = [
+      {
+        header: 'Column 1',
+        meta: { isPinned: 'left' },
+      },
+      {
+        id: 'col2',
+        header: 'Column 2',
+        meta: { isPinned: 'right' },
+      },
+    ];
+
+    const pinningState = getColumnPinningState(columns);
+    expect(pinningState).toEqual({
+      left: [],
+      right: ['col2'],
+    });
+  });
+
+  it('handles columns with undefined meta or isPinned properties', () => {
+    const columns: ColumnDef<any>[] = [
+      {
+        id: 'col1',
+        header: 'Column 1',
+        meta: undefined,
+      },
+      {
+        id: 'col2',
+        header: 'Column 2',
+        meta: { isPinned: undefined },
+      },
+      {
+        id: 'col3',
+        header: 'Column 3',
+        meta: { isPinned: 'left' },
+      },
+    ];
+
+    const pinningState = getColumnPinningState(columns);
+    expect(pinningState).toEqual({
+      left: ['col3'],
+      right: [],
+    });
+  });
+});