nexstruct 1.0.0

package/templates/ui/antd/src/app/examples/layout.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import {
+  Layout, Typography, Button, Space, Drawer, List, Divider, Grid, theme,
+} from 'antd';
+import {
+  MenuOutlined, CloseOutlined, HomeOutlined, GithubOutlined, AppstoreOutlined,
+} from '@ant-design/icons';
+
+const { Header, Content, Footer } = Layout;
+const { Text } = Typography;
+const { useBreakpoint } = Grid;
+
+export default function ExamplesLayout({ children }: { children: React.ReactNode }) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const screens = useBreakpoint();
+  const { token } = theme.useToken();
+
+  return (
+    <Layout style={{ minHeight: '100vh', background: token.colorBgContainer }}>
+      {/* Navbar */}
+      <Header style={{
+        position: 'sticky', top: 0, zIndex: 100,
+        background: 'rgba(255,255,255,0.9)', backdropFilter: 'blur(16px)',
+        borderBottom: `1px solid ${token.colorBorderSecondary}`,
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        padding: '0 24px', height: 64,
+      }}>
+        <Space>
+          <Link href="/" passHref legacyBehavior>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+              <div style={{
+                width: 28, height: 28, borderRadius: 6,
+                background: token.colorPrimary, display: 'flex',
+                alignItems: 'center', justifyContent: 'center',
+              }}>
+                <Text strong style={{ color: '#fff', fontSize: 14 }}>F</Text>
+              </div>
+              <Text strong style={{ display: screens.sm ? 'block' : 'none' }}>Nexstruct</Text>
+            </div>
+          </Link>
+          <Divider type="vertical" />
+          <Space size={4}>
+            <AppstoreOutlined style={{ color: token.colorPrimary, fontSize: 14 }} />
+            <Text style={{ color: token.colorPrimary, fontWeight: 500 }}>Components</Text>
+          </Space>
+        </Space>
+
+        {screens.md && (
+          <Space>
+            <Link href="/" passHref legacyBehavior>
+              <Button type="text" size="small" icon={<HomeOutlined />}>Home</Button>
+            </Link>
+            <Button type="text" size="small" icon={<GithubOutlined />} href="https://github.com" target="_blank" />
+          </Space>
+        )}
+
+        {!screens.md && (
+          <Button type="text" icon={<MenuOutlined />} onClick={() => setMobileOpen(true)} />
+        )}
+      </Header>
+
+      {/* Mobile Drawer */}
+      <Drawer
+        title="Navigate"
+        placement="right"
+        onClose={() => setMobileOpen(false)}
+        open={mobileOpen}
+        closeIcon={<CloseOutlined />}
+        width={280}
+      >
+        <List
+          dataSource={[
+            { label: 'Home', href: '/' },
+            { label: 'Components', href: '/examples' },
+          ]}
+          renderItem={(item) => (
+            <List.Item>
+              <Link href={item.href} passHref legacyBehavior>
+                <Button type="link" onClick={() => setMobileOpen(false)}>
+                  {item.label}
+                </Button>
+              </Link>
+            </List.Item>
+          )}
+        />
+      </Drawer>
+
+      {/* Content */}
+      <Content style={{ minHeight: 'calc(100vh - 128px)' }}>
+        {children}
+      </Content>
+
+      {/* Footer */}
+      <Footer style={{
+        background: token.colorBgElevated,
+        borderTop: `1px solid ${token.colorBorderSecondary}`,
+        padding: '16px 24px',
+      }}>
+        <div style={{
+          display: 'flex', justifyContent: 'space-between',
+          alignItems: 'center', flexWrap: 'wrap', gap: 8,
+          maxWidth: 1200, margin: '0 auto',
+        }}>
+          <Text type="secondary" style={{ fontSize: 12, opacity: 0.6 }}>
+            Ant Design Component System — Scaffolded with Nexstruct
+          </Text>
+          <Space size="middle">
+            <Link href="/" passHref legacyBehavior>
+              <Text style={{ fontSize: 12, opacity: 0.6, cursor: 'pointer' }}>Home</Text>
+            </Link>
+            <Text
+              style={{ fontSize: 12, opacity: 0.6, cursor: 'pointer' }}
+              onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            >
+              Back to Top
+            </Text>
+          </Space>
+        </div>
+      </Footer>
+    </Layout>
+  );
+}

package/templates/ui/antd/src/app/examples/page.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import Link from 'next/link';
+import { Card, Row, Col, Typography, Space, theme } from 'antd';
+import {
+  FormOutlined, TableOutlined, AppstoreOutlined,
+} from '@ant-design/icons';
+
+const { Title, Text, Paragraph } = Typography;
+
+const examples = [
+  {
+    href: '/examples/form',
+    title: 'Form Components',
+    desc: 'All CustomField field types with react-hook-form validation and Zod schemas.',
+    icon: <FormOutlined style={{ fontSize: 40, color: '#1677ff' }} />,
+  },
+  {
+    href: '/examples/table',
+    title: 'DynamicTable',
+    desc: 'Config-driven table with loading, empty, and checkbox selection states using Ant Design Table.',
+    icon: <TableOutlined style={{ fontSize: 40, color: '#13c2c2' }} />,
+  },
+  {
+    href: '/examples/dialog',
+    title: 'Dialog, ActionButton & Pagination',
+    desc: 'Reusable DialogWrapper, action button variants with tooltips, and Ant Design pagination.',
+    icon: <AppstoreOutlined style={{ fontSize: 40, color: '#722ed1' }} />,
+  },
+];
+
+export default function ExamplesPage() {
+  const { token } = theme.useToken();
+
+  return (
+    <div style={{ padding: 48, maxWidth: 960, margin: '0 auto' }}>
+      <div style={{ marginBottom: 32 }}>
+        <Title level={2} style={{ fontWeight: 800, margin: 0 }}>Component Examples</Title>
+        <Text type="secondary" style={{ fontSize: 16, display: 'block', marginTop: 4 }}>
+          Interactive demos of the Ant Design custom component system.
+        </Text>
+      </div>
+      <Row gutter={[24, 24]}>
+        {examples.map((ex) => (
+          <Col xs={24} sm={12} lg={8} key={ex.href}>
+            <Link href={ex.href} passHref legacyBehavior>
+              <Card
+                hoverable
+                style={{ height: '100%', borderRadius: 12, cursor: 'pointer' }}
+                styles={{ body: { padding: 24 } }}
+              >
+                <div style={{ marginBottom: 16 }}>{ex.icon}</div>
+                <Title level={4} style={{ fontWeight: 700, margin: 0 }}>{ex.title}</Title>
+                <Paragraph type="secondary" style={{ marginTop: 8, lineHeight: 1.7, marginBottom: 0 }}>
+                  {ex.desc}
+                </Paragraph>
+              </Card>
+            </Link>
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+}

package/templates/ui/antd/src/app/examples/table/page.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useState } from 'react';
+import { Typography, Space, Tag, theme } from 'antd';
+import { DynamicTable, type TableColumn } from '@/components/common/DynamicTable/dynamic-table.component';
+import { LimitField } from '@/components/common/fields/assets/components/limit-field.component';
+import { ActionButton } from '@/components/common/button/action-button.component';
+import { Pagination } from '@/components/common/pagination/pagination.component';
+
+const { Title, Text } = Typography;
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const allUsers: User[] = Array.from({ length: 53 }, (_, i) => ({
+  id: String(i + 1),
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: i % 3 === 0 ? 'Admin' : i % 3 === 1 ? 'Editor' : 'Viewer',
+}));
+
+const columns: TableColumn[] = [
+  { key: 'name', header: 'Name' },
+  { key: 'email', header: 'Email' },
+  {
+    key: 'role',
+    header: 'Role',
+    render: (item: User) => {
+      const color = item.role === 'Admin' ? 'blue' : item.role === 'Editor' ? 'purple' : 'cyan';
+      return <Tag color={color} style={{ borderRadius: 6 }}>{item.role}</Tag>;
+    },
+  },
+];
+
+export default function TableExamplePage() {
+  const { token } = theme.useToken();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [limit, setLimit] = useState('10');
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  const perPage = Number(limit);
+  const totalPages = Math.ceil(allUsers.length / perPage);
+  const paginatedData = allUsers.slice((currentPage - 1) * perPage, currentPage * perPage);
+
+  const refresh = () => {
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 1000);
+  };
+
+  return (
+    <div style={{ maxWidth: 960, margin: '0 auto', padding: 32 }}>
+      <div style={{ marginBottom: 24 }}>
+        <Title level={2} style={{ fontWeight: 800, margin: 0 }}>DynamicTable Demo</Title>
+        <Text type="secondary" style={{ fontSize: 15, display: 'block', marginTop: 4 }}>
+          Config-driven Ant Design Table with loading state, checkbox selection, and pagination.
+        </Text>
+      </div>
+
+      <div style={{
+        background: token.colorBgContainer,
+        borderRadius: 12,
+        border: `1px solid ${token.colorBorderSecondary}`,
+        padding: 24,
+      }}>
+        <div style={{
+          display: 'flex', alignItems: 'center',
+          justifyContent: 'space-between', marginBottom: 16,
+          flexWrap: 'wrap', gap: 12,
+        }}>
+          <Space size="middle">
+            <LimitField
+              limit={limit}
+              setLimit={(v) => { setLimit(v); setCurrentPage(1); }}
+              totalItems={allUsers.length}
+            />
+            <ActionButton
+              buttonContent="Refresh"
+              variant="default"
+              handleOpen={refresh}
+              btnSize="small"
+            />
+          </Space>
+          {selectedIds.length > 0 && (
+            <Text type="secondary" style={{ fontSize: 13 }}>
+              {selectedIds.length} selected
+            </Text>
+          )}
+        </div>
+
+        <DynamicTable
+          data={paginatedData}
+          isLoading={isLoading}
+          config={{ columns }}
+          isCheckBox
+          selectedIds={selectedIds}
+          setSelectedIds={setSelectedIds}
+          rowKey="id"
+        />
+
+        {totalPages > 1 && (
+          <div style={{ marginTop: 20 }}>
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              setCurrentPage={setCurrentPage}
+              total={allUsers.length}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/ui/antd/src/app/page.tsx

@@ -0,0 +1,283 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import {
+  Layout, Typography, Button, Space, Card, Row, Col, Divider,
+  Tag, Drawer, List, Grid, App, theme,
+} from 'antd';
+import {
+  MenuOutlined, CloseOutlined, GithubOutlined,
+  ArrowRightOutlined, AppstoreOutlined, FormOutlined,
+  TableOutlined, CodeOutlined, StarOutlined,
+} from '@ant-design/icons';
+
+const { Header, Content, Footer } = Layout;
+const { Title, Text, Paragraph } = Typography;
+const { useBreakpoint } = Grid;
+
+const features = [
+  {
+    icon: <AppstoreOutlined style={{ fontSize: 32, color: '#1677ff' }} />,
+    title: '22 UI Primitives',
+    desc: 'Button, Card, Modal, Table, Tabs, Avatar, Select, Switch, Tooltip, Drawer, Dropdown, and more — all pre-styled with Ant Design.',
+    color: '#1677ff',
+  },
+  {
+    icon: <FormOutlined style={{ fontSize: 32, color: '#722ed1' }} />,
+    title: 'CustomField System',
+    desc: '17 field types with dual-mode: react-hook-form integration or standalone value/setValue.',
+    color: '#722ed1',
+  },
+  {
+    icon: <TableOutlined style={{ fontSize: 32, color: '#13c2c2' }} />,
+    title: 'DynamicTable',
+    desc: 'Ant Design Table wrapper with loading states, empty states, and checkbox selection.',
+    color: '#13c2c2',
+  },
+  {
+    icon: <CodeOutlined style={{ fontSize: 32, color: '#eb2f96' }} />,
+    title: 'Form Validation',
+    desc: 'React Hook Form + Zod schema validation with live error messages and form state tracking.',
+    color: '#eb2f96',
+  },
+];
+
+const techStack = [
+  'Ant Design 5', 'React Hook Form', 'Zod', 'Next.js 15', 'TypeScript',
+  '@ant-design/icons', 'dayjs',
+];
+
+const navLinks = [
+  { label: 'Home', href: '/' },
+  { label: 'Components', href: '/examples' },
+];
+
+export default function Home() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const screens = useBreakpoint();
+  const { token } = theme.useToken();
+
+  return (
+    <Layout style={{ minHeight: '100vh', background: token.colorBgContainer }}>
+      {/* Navbar */}
+      <Header style={{
+        position: 'sticky', top: 0, zIndex: 100,
+        background: 'rgba(255,255,255,0.9)', backdropFilter: 'blur(16px)',
+        borderBottom: `1px solid ${token.colorBorderSecondary}`,
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        padding: '0 24px', height: 64,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{
+            width: 32, height: 32, borderRadius: 6,
+            background: token.colorPrimary, display: 'flex',
+            alignItems: 'center', justifyContent: 'center',
+          }}>
+            <Text strong style={{ color: '#fff', fontSize: 16 }}>F</Text>
+          </div>
+          <Text strong style={{ fontSize: 16, letterSpacing: '-0.02em' }}>Nexstruct</Text>
+        </div>
+
+        {screens.md && (
+          <Space size="small">
+            {navLinks.map((link) => (
+              <Link key={link.href} href={link.href} passHref legacyBehavior>
+                <Button type={link.href === '/' ? 'primary' : 'text'} size="small">
+                  {link.label}
+                </Button>
+              </Link>
+            ))}
+            <Divider type="vertical" />
+            <Button type="text" icon={<GithubOutlined />} size="small" href="https://github.com" target="_blank" />
+          </Space>
+        )}
+
+        {!screens.md && (
+          <Button type="text" icon={<MenuOutlined />} onClick={() => setMobileOpen(true)} />
+        )}
+      </Header>
+
+      {/* Mobile Drawer */}
+      <Drawer
+        title="Menu"
+        placement="right"
+        onClose={() => setMobileOpen(false)}
+        open={mobileOpen}
+        closeIcon={<CloseOutlined />}
+        width={280}
+      >
+        <List
+          dataSource={navLinks}
+          renderItem={(link) => (
+            <List.Item>
+              <Link href={link.href} passHref legacyBehavior>
+                <Button type="link" onClick={() => setMobileOpen(false)}>
+                  {link.label}
+                </Button>
+              </Link>
+            </List.Item>
+          )}
+        />
+      </Drawer>
+
+      <Content>
+        {/* Hero Section */}
+        <div style={{
+          background: 'linear-gradient(135deg, #141414 0%, #1a1a2e 50%, #16213e 100%)',
+          padding: screens.md ? '100px 48px' : '60px 24px',
+          textAlign: 'center',
+        }}>
+          <Space direction="vertical" size="middle" style={{ width: '100%', maxWidth: 720 }}>
+            <Space wrap size="small" justify="center">
+              <Tag color="blue" style={{ borderRadius: 12 }}>Ant Design 5</Tag>
+              <Tag color="purple" style={{ borderRadius: 12 }}>TypeScript</Tag>
+              <Tag color="cyan" style={{ borderRadius: 12 }}>Next.js 15</Tag>
+            </Space>
+            <Title level={1} style={{
+              color: '#fff', fontSize: screens.md ? 52 : 32,
+              fontWeight: 800, letterSpacing: '-0.03em', margin: 0,
+            }}>
+              Build Beautiful Apps with{' '}
+              <Text style={{
+                background: 'linear-gradient(135deg, #1677ff, #9254de)',
+                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
+              }}>
+                Ant Design Components
+              </Text>
+            </Title>
+            <Paragraph style={{
+              color: 'rgba(255,255,255,0.75)', fontSize: 18,
+              maxWidth: 600, margin: '0 auto', lineHeight: 1.6,
+            }}>
+              A production-ready component system built on Ant Design — with form validation,
+              dynamic tables, dialogs, and 22+ UI primitives.
+            </Paragraph>
+            <Space size="middle" wrap justify="center">
+              <Link href="/examples" passHref legacyBehavior>
+                <Button type="primary" size="large" icon={<ArrowRightOutlined />}>
+                  Explore Components
+                </Button>
+              </Link>
+              <Button size="large" ghost icon={<StarOutlined />} href="#features">
+                Learn More
+              </Button>
+            </Space>
+          </Space>
+        </div>
+
+        {/* Feature Cards */}
+        <div id="features" style={{ padding: screens.md ? '80px 48px' : '48px 24px', scrollMarginTop: 80 }}>
+          <div style={{ textAlign: 'center', marginBottom: 48 }}>
+            <Title level={2} style={{ fontWeight: 800, margin: 0 }}>What&apos;s Included</Title>
+            <Text type="secondary" style={{ fontSize: 16, display: 'block', marginTop: 8 }}>
+              A complete component ecosystem — every piece is pre-built, pre-styled, and ready for production.
+            </Text>
+            <Divider style={{
+              width: 80, minWidth: 80, margin: '16px auto',
+              borderTopWidth: 3, borderColor: token.colorPrimary,
+              borderRadius: 4,
+            }} />
+          </div>
+          <Row gutter={[24, 24]} justify="center">
+            {features.map((f) => (
+              <Col xs={24} sm={12} lg={6} key={f.title}>
+                <Card
+                  hoverable
+                  style={{ height: '100%', borderRadius: 12 }}
+                  styles={{ body: { padding: 24 } }}
+                >
+                  <div style={{ marginBottom: 16 }}>{f.icon}</div>
+                  <Title level={4} style={{ fontWeight: 700, margin: 0 }}>{f.title}</Title>
+                  <Paragraph type="secondary" style={{ marginTop: 8, lineHeight: 1.7 }}>
+                    {f.desc}
+                  </Paragraph>
+                </Card>
+              </Col>
+            ))}
+          </Row>
+        </div>
+
+        {/* Tech Stack */}
+        <div style={{
+          padding: screens.md ? '64px 48px' : '40px 24px',
+          background: token.colorBgLayout,
+        }}>
+          <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto' }}>
+            <Title level={3} style={{ fontWeight: 700, margin: 0 }}>Powered By</Title>
+            <Text type="secondary" style={{ display: 'block', margin: '8px 0 24px' }}>
+              Built on battle-tested libraries you already trust.
+            </Text>
+            <Space wrap size="small" justify="center">
+              {techStack.map((t) => (
+                <Tag key={t} style={{ borderRadius: 12, padding: '4px 12px', fontSize: 13 }}>
+                  {t}
+                </Tag>
+              ))}
+            </Space>
+          </div>
+        </div>
+
+        {/* CTA */}
+        <div style={{ padding: screens.md ? '80px 48px' : '48px 24px', textAlign: 'center' }}>
+          <Title level={2} style={{ fontWeight: 800 }}>Ready to Explore?</Title>
+          <Paragraph type="secondary" style={{ fontSize: 16, marginBottom: 32 }}>
+            See every component in action — buttons, forms, tables, dialogs, and more.
+          </Paragraph>
+          <Link href="/examples" passHref legacyBehavior>
+            <Button type="primary" size="large" icon={<ArrowRightOutlined />}>
+              View Component Showcase
+            </Button>
+          </Link>
+        </div>
+      </Content>
+
+      {/* Footer */}
+      <Footer style={{
+        background: token.colorBgElevated,
+        borderTop: `1px solid ${token.colorBorderSecondary}`,
+        padding: '48px 24px 24px',
+      }}>
+        <Row gutter={[24, 24]} style={{ maxWidth: 1200, margin: '0 auto' }}>
+          <Col xs={24} md={12}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+              <div style={{
+                width: 28, height: 28, borderRadius: 6,
+                background: token.colorPrimary, display: 'flex',
+                alignItems: 'center', justifyContent: 'center',
+              }}>
+                <Text strong style={{ color: '#fff', fontSize: 14 }}>F</Text>
+              </div>
+              <Text strong>Nexstruct</Text>
+            </div>
+            <Text type="secondary" style={{ display: 'block', maxWidth: 360 }}>
+              Scaffolding production-ready Next.js applications with composable, framework-specific component systems.
+            </Text>
+          </Col>
+          <Col xs={12} md={6}>
+            <Text strong style={{ opacity: 0.5, textTransform: 'uppercase', fontSize: 12, letterSpacing: '0.05em' }}>Navigate</Text>
+            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
+              {['Home', 'Components', 'GitHub'].map((l) => (
+                <Link key={l} href={l === 'Home' ? '/' : l === 'Components' ? '/examples' : '#'} passHref legacyBehavior>
+                  <Text style={{ cursor: 'pointer' }} type="secondary">{l}</Text>
+                </Link>
+              ))}
+            </div>
+          </Col>
+          <Col xs={12} md={6}>
+            <Text strong style={{ opacity: 0.5, textTransform: 'uppercase', fontSize: 12, letterSpacing: '0.05em' }}>Tech</Text>
+            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
+              {['Ant Design 5', 'Next.js 15', 'TypeScript', 'React Hook Form'].map((t) => (
+                <Text key={t} type="secondary">{t}</Text>
+              ))}
+            </div>
+          </Col>
+        </Row>
+        <Divider style={{ borderColor: token.colorBorderSecondary, margin: '24px 0 16px' }} />
+        <Text type="secondary" style={{ display: 'block', textAlign: 'center', fontSize: 12, opacity: 0.6 }}>
+          Scaffolded with Nexstruct — {new Date().getFullYear()}
+        </Text>
+      </Footer>
+    </Layout>
+  );
+}

package/templates/ui/antd/src/components/common/DynamicTable/dynamic-table.component.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { Table, Typography } from 'antd';
+import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface';
+
+const { Text } = Typography;
+
+export type TableColumn = {
+  key: string;
+  header: string;
+  className?: string;
+  render?: (item: any, index: number) => React.ReactNode;
+};
+
+export type TableConfig = {
+  columns: TableColumn[];
+  emptyMessage?: string;
+  rowClassName?: (item: any) => string;
+};
+
+interface DynamicTableProps {
+  isLoading: boolean;
+  config: TableConfig;
+  data: any[];
+  isCheckBox?: boolean;
+  selectedIds?: string[];
+  setSelectedIds?: (ids: string[]) => void;
+  setSelectObject?: (data: any[]) => void;
+  rowKey?: string;
+}
+
+export function DynamicTable({
+  data, isLoading, config, isCheckBox = false,
+  selectedIds = [], setSelectedIds = () => {}, setSelectObject = () => {},
+  rowKey = 'id',
+}: DynamicTableProps) {
+  const columns: ColumnsType<any> = config.columns.map((col) => ({
+    key: col.key,
+    title: col.header,
+    dataIndex: col.key,
+    className: col.className,
+    render: col.render ? (_val: any, record: any, index: number) => col.render!(record, index) : undefined,
+    ellipsis: true,
+  }));
+
+  const rowSelection: TableRowSelection<any> | undefined = isCheckBox
+    ? {
+        selectedRowKeys: selectedIds,
+        onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
+          setSelectedIds(selectedRowKeys as string[]);
+          setSelectObject(selectedRows);
+        },
+        preserveSelectedRowKeys: true,
+      }
+    : undefined;
+
+  return (
+    <div className="antd-dynamic-table">
+      <Table
+        columns={columns}
+        dataSource={data}
+        loading={isLoading}
+        rowKey={rowKey}
+        rowClassName={(record) => config.rowClassName?.(record) || ''}
+        rowSelection={rowSelection}
+        pagination={false}
+        locale={{
+          emptyText: isLoading ? null : (
+            <div style={{ padding: 48, textAlign: 'center' }}>
+              <Text type="secondary">{config.emptyMessage || 'No data available'}</Text>
+            </div>
+          ),
+        }}
+        size="middle"
+        scroll={{ x: 'max-content' }}
+      />
+    </div>
+  );
+}