react-table-dnd/index.html at main · samiodeh1337/react-table-dnd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react-table-dnd - Drag-and-Drop Sortable Table for React</title>
    <meta
      name="description"
      content="React table component with drag-and-drop row and column reordering. 60fps animations, auto-scroll, virtual scrolling for 100k+ rows, mobile support, TypeScript, and full style control. Zero UI dependencies."
    />
    <meta
      name="keywords"
      content="react, table, sortable, draggable, drag and drop, row reordering, column reordering, react table, data grid, virtual scrolling, react component, react drag drop, sortable table, react sortable, react grid, react data table, mobile drag drop"
    />
    <meta name="author" content="Sami Odeh" />
    <meta name="google-site-verification" content="f0PaeyhTa7SwH0QOxSzJQgT3qmC9BZfkR0t3XGovM5Y" />
    <meta name="robots" content="index, follow" />
    <meta name="theme-color" content="#09090b" />

    <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="react-table-dnd" />
    <meta property="og:title" content="react-table-dnd - Drag-and-Drop Sortable Table for React" />
    <meta
      property="og:description"
      content="Reorder rows and columns with smooth 60fps animations, auto-scroll, virtual scrolling for 100k+ rows, and full mobile support. Zero UI dependencies."
    />
    <meta property="og:url" content="https://samiodeh1337.github.io/react-table-dnd/" />
    <meta
      property="og:image"
      content="https://samiodeh1337.github.io/react-table-dnd/og-image.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta
      property="og:image:alt"
      content="react-table-dnd — drag-and-drop sortable table for React"
    />
    <meta property="og:locale" content="en_US" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="react-table-dnd - Sortable Table for React" />
    <meta
      name="twitter:description"
      content="Drag-and-drop row and column reordering for React tables. 60fps animations, virtual scrolling, mobile support."
    />
    <meta
      name="twitter:image"
      content="https://samiodeh1337.github.io/react-table-dnd/og-image.png"
    />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://samiodeh1337.github.io/react-table-dnd/" />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/react-table-dnd/favicon.svg" />
    <link rel="apple-touch-icon" href="/react-table-dnd/apple-touch-icon.png" />

    <!-- Preconnect for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />

    <!-- Structured Data: Software Application (better than SoftwareSourceCode for search) -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "react-table-dnd",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Web",
        "description": "React component library for drag-and-drop row and column reordering in tables. Features 60fps animations, auto-scroll, virtual scrolling for 100k+ rows, mobile long-press support, drag handles, and full style customization.",
        "url": "https://samiodeh1337.github.io/react-table-dnd/",
        "downloadUrl": "https://www.npmjs.com/package/react-table-dnd",
        "softwareVersion": "2.0.16",
        "programmingLanguage": ["TypeScript", "React"],
        "license": "https://opensource.org/licenses/MIT",
        "author": {
          "@type": "Person",
          "name": "Sami Odeh",
          "url": "https://github.com/samiodeh1337"
        },
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      }
    </script>

    <!-- Structured Data: BreadcrumbList -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://samiodeh1337.github.io/react-table-dnd/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Demos",
            "item": "https://samiodeh1337.github.io/react-table-dnd/#demos"
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": "Getting Started",
            "item": "https://samiodeh1337.github.io/react-table-dnd/#getting-started"
          },
          {
            "@type": "ListItem",
            "position": 4,
            "name": "API Reference",
            "item": "https://samiodeh1337.github.io/react-table-dnd/#api"
          }
        ]
      }
    </script>

    <!-- Structured Data: FAQPage -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "How do I install react-table-dnd?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Run npm install react-table-dnd. It requires React 17 or higher as a peer dependency."
            }
          },
          {
            "@type": "Question",
            "name": "Does react-table-dnd support mobile drag and drop?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. It supports mobile via long-press to drag, with auto-scroll near edges and smooth touch event handling optimized for Chrome Android and Safari iOS."
            }
          },
          {
            "@type": "Question",
            "name": "Can react-table-dnd handle large datasets?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. It integrates with @tanstack/react-virtual for virtual scrolling, handling 100,000+ rows with no performance drop. Drag animations use direct DOM transforms at 60fps without React re-renders."
            }
          },
          {
            "@type": "Question",
            "name": "How do I customize the table styles?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Every component accepts className and style props. Works with plain CSS, CSS modules, Tailwind CSS, and styled-components. The library applies no opinionated styles to cells."
            }
          },
          {
            "@type": "Question",
            "name": "Can I lock specific rows or columns from being dragged?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. Use the options prop with rowDragRange and columnDragRange to specify which rows and columns are draggable. Locked items stay in place."
            }
          }
        ]
      }
    </script>
  </head>
  <body>
    <div id="root"></div>

    <!-- SEO: Static content for crawlers that don't execute JavaScript -->
    <noscript>
      <div
        style="
          max-width: 800px;
          margin: 0 auto;
          padding: 40px 20px;
          font-family: system-ui, sans-serif;
          color: #333;
        "
      >
        <h1>react-table-dnd — Drag-and-Drop Sortable Table for React</h1>
        <p>
          A React component library for drag-and-drop sortable tables with row and column
          reordering. 60fps animations, auto-scroll, virtual scrolling for 100k+ rows, mobile
          support, and full style control.
        </p>

        <h2>Features</h2>
        <ul>
          <li>Drag-and-drop row and column reordering</li>
          <li>Smooth 60fps animations using direct DOM transforms</li>
          <li>Auto-scroll when dragging near container edges</li>
          <li>Mobile support with long-press to drag</li>
          <li>Drag range constraints for locking rows and columns</li>
          <li>DragHandle component for grip-based dragging</li>
          <li>Virtual scrolling support for 100,000+ rows</li>
          <li>Full className and style prop support on every component</li>
          <li>Works with Tailwind CSS, styled-components, CSS modules</li>
          <li>TypeScript support with full type definitions</li>
          <li>Zero external UI dependencies</li>
        </ul>

        <h2>Install</h2>
        <code>npm install react-table-dnd</code>

        <h2>Components</h2>
        <ul>
          <li><strong>TableContainer</strong> — Root wrapper providing drag-and-drop context</li>
          <li><strong>TableHeader</strong> — Header row container</li>
          <li><strong>ColumnCell</strong> — Draggable column header cell</li>
          <li>
            <strong>TableBody</strong> — Body container with ref support for virtual scrolling
          </li>
          <li><strong>BodyRow</strong> — Draggable table row</li>
          <li><strong>RowCell</strong> — Cell within a body row</li>
          <li><strong>DragHandle</strong> — Restricts drag to a specific grip element</li>
        </ul>

        <h2>Quick Start</h2>
        <p>
          Wrap your table with TableContainer and pass an onDragEnd callback to handle reordering.
          Each ColumnCell and BodyRow is independently draggable. Supports both row and column
          reordering simultaneously.
        </p>

        <h2>Styling</h2>
        <p>
          Every component accepts className and style props. The library applies no opinionated
          styles — use plain CSS, Tailwind, styled-components, or any approach you prefer.
        </p>

        <p>
          <a href="https://github.com/samiodeh1337/react-table-dnd">View on GitHub</a> |
          <a href="https://www.npmjs.com/package/react-table-dnd">View on npm</a>
        </p>
      </div>
    </noscript>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>