diff --git a/docs/framework/octane/guide/cell-spanning.md b/docs/framework/octane/guide/cell-spanning.md
index eeb2709536..431d718e94 100644
--- a/docs/framework/octane/guide/cell-spanning.md
+++ b/docs/framework/octane/guide/cell-spanning.md
@@ -68,12 +68,12 @@ A covered cell reports a span of `0`, and the renderer skips it. This is the sam
     const colSpan = cell.getColSpan()
 
     // A span of 0 means the cell is covered by a cell above or to its left.
-    // Skip it. Do not render `rowSpan={0}`: in HTML that means "span to the
+    // Skip it. Do not render `rowspan={0}`: in HTML that means "span to the
     // end of the row group", which merges the cell down the entire tbody.
     if (rowSpan === 0 || colSpan === 0) return null
 
     return (
-      <td key={cell.id} rowSpan={rowSpan} colSpan={colSpan}>
+      <td key={cell.id} rowspan={rowSpan} colspan={colSpan}>
         <table.FlexRender cell={cell} />
       </td>
     )
diff --git a/docs/framework/octane/guide/column-resizing.md b/docs/framework/octane/guide/column-resizing.md
index 62908238eb..d8a38487d8 100644
--- a/docs/framework/octane/guide/column-resizing.md
+++ b/docs/framework/octane/guide/column-resizing.md
@@ -119,7 +119,7 @@ How you apply these size styles to your markup is up to you, but it is pretty co
 ```tsx
 <th
   key={header.id}
-  colSpan={header.colSpan}
+  colspan={header.colSpan}
   style={{ width: `${header.getSize()}px` }}
 >
 ```
diff --git a/docs/framework/octane/guide/expanding.md b/docs/framework/octane/guide/expanding.md
index d280f45ddd..59ddd32624 100644
--- a/docs/framework/octane/guide/expanding.md
+++ b/docs/framework/octane/guide/expanding.md
@@ -146,7 +146,7 @@ const table = useTable({
       {row.getIsExpanded() && (
         <tr>
           {/* span however many columns the expanded data needs if it does not share the parent row's columns */}
-          <td colSpan={row.getAllCells().length}>
+          <td colspan={row.getAllCells().length}>
             {/* Your custom UI goes here */}
           </td>
         </tr>
diff --git a/examples/octane/aggregation/src/main.tsrx b/examples/octane/aggregation/src/main.tsrx
index 293ba08e7f..1982915692 100644
--- a/examples/octane/aggregation/src/main.tsrx
+++ b/examples/octane/aggregation/src/main.tsrx
@@ -218,7 +218,7 @@ function App() @{
           {table.getFooterGroups().map((group) => (
             <tr key={group.id}>
               {group.headers.map((header) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th key={header.id} colspan={header.colSpan}>
                   {header.isPlaceholder ? null : (
                     <table.FlexRender footer={header} />
                   )}
diff --git a/examples/octane/basic-dynamic-columns/src/main.tsrx b/examples/octane/basic-dynamic-columns/src/main.tsrx
index c01f4840fd..0b10aad9b0 100644
--- a/examples/octane/basic-dynamic-columns/src/main.tsrx
+++ b/examples/octane/basic-dynamic-columns/src/main.tsrx
@@ -191,7 +191,7 @@ function App() @{
           @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
             <tr>
               @for (const header of headerGroup.headers; key header.id) {
-                <th colSpan={header.colSpan}>
+                <th colspan={header.colSpan}>
                   {header.isPlaceholder ? null : <>
                     <div
                       className={header.column.getCanSort() ? 'sortable-header' : ''}
diff --git a/examples/octane/basic-external-atoms/src/main.tsrx b/examples/octane/basic-external-atoms/src/main.tsrx
index 067687096c..7fd6a5866f 100644
--- a/examples/octane/basic-external-atoms/src/main.tsrx
+++ b/examples/octane/basic-external-atoms/src/main.tsrx
@@ -88,7 +88,7 @@ function App() @{
         @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
           <tr>
             @for (const header of headerGroup.headers; key header.id) {
-              <th colSpan={header.colSpan}>
+              <th colspan={header.colSpan}>
                 {header.isPlaceholder ? null : <div
                   className={header.column.getCanSort() ? 'sortable-header' : ''}
                   onClick={header.column.getToggleSortingHandler()}
diff --git a/examples/octane/basic-external-atoms/tests/e2e/smoke.spec.ts b/examples/octane/basic-external-atoms/tests/e2e/smoke.spec.ts
index fa9bcc2272..20ec99cab8 100644
--- a/examples/octane/basic-external-atoms/tests/e2e/smoke.spec.ts
+++ b/examples/octane/basic-external-atoms/tests/e2e/smoke.spec.ts
@@ -31,9 +31,11 @@ test('updates pagination atom and row model without errors', async ({
     await expect(status).toContainText('1 of 100')
     const timing = await page
       .getByRole('button', { name: '>', exact: true })
-      .evaluate((button) => {
+      .evaluate(async (button) => {
         const started = performance.now()
         ;(button as HTMLButtonElement).click()
+        // Octane commits a click's updates in the next microtask.
+        await Promise.resolve()
         return {
           elapsed: performance.now() - started,
           status: document.querySelector('.controls strong')?.textContent,
@@ -48,9 +50,10 @@ test('updates pagination atom and row model without errors', async ({
     const sortTiming = await page
       .locator('.sortable-header')
       .first()
-      .evaluate((header) => {
+      .evaluate(async (header) => {
         const started = performance.now()
         ;(header as HTMLElement).click()
+        await Promise.resolve()
         return {
           elapsed: performance.now() - started,
           text: header.textContent,
diff --git a/examples/octane/basic-external-state/src/main.tsrx b/examples/octane/basic-external-state/src/main.tsrx
index 1a71fc3ffa..5ba290ca20 100644
--- a/examples/octane/basic-external-state/src/main.tsrx
+++ b/examples/octane/basic-external-state/src/main.tsrx
@@ -93,7 +93,7 @@ function App() @{
         @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
           <tr>
             @for (const header of headerGroup.headers; key header.id) {
-              <th colSpan={header.colSpan}>
+              <th colspan={header.colSpan}>
                 {header.isPlaceholder ? null : <div
                   className={header.column.getCanSort() ? 'sortable-header' : ''}
                   onClick={header.column.getToggleSortingHandler()}
diff --git a/examples/octane/basic-external-state/tests/e2e/smoke.spec.ts b/examples/octane/basic-external-state/tests/e2e/smoke.spec.ts
index d8c7294f12..04de9687e7 100644
--- a/examples/octane/basic-external-state/tests/e2e/smoke.spec.ts
+++ b/examples/octane/basic-external-state/tests/e2e/smoke.spec.ts
@@ -37,9 +37,11 @@ test('advances controlled pagination repeatedly without render-phase errors', as
     const status = page.getByText(/^Page$/).locator('..')
     await expect(status).toContainText('1 of 100')
     const first = await firstRow(page)
-    const timing = await next.evaluate((button) => {
+    const timing = await next.evaluate(async (button) => {
       const started = performance.now()
       ;(button as HTMLButtonElement).click()
+      // Octane commits a click's updates in the next microtask.
+      await Promise.resolve()
       return {
         elapsed: performance.now() - started,
         status: document.querySelector('.controls strong')?.textContent,
@@ -56,9 +58,10 @@ test('advances controlled pagination repeatedly without render-phase errors', as
     const sortTiming = await page
       .locator('.sortable-header')
       .first()
-      .evaluate((header) => {
+      .evaluate(async (header) => {
         const started = performance.now()
         ;(header as HTMLElement).click()
+        await Promise.resolve()
         return {
           elapsed: performance.now() - started,
           text: header.textContent,
diff --git a/examples/octane/basic-subscribe/src/main.tsrx b/examples/octane/basic-subscribe/src/main.tsrx
index 21f97dbb86..f919160e64 100644
--- a/examples/octane/basic-subscribe/src/main.tsrx
+++ b/examples/octane/basic-subscribe/src/main.tsrx
@@ -139,7 +139,7 @@ function App() @{
         @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
           <tr>
             @for (const header of headerGroup.headers; key header.id) {
-              <th colSpan={header.colSpan}>
+              <th colspan={header.colSpan}>
                 {header.isPlaceholder ? null : <>
                   <table.FlexRender header={header} />
                   {header.column.getCanFilter()
@@ -175,7 +175,7 @@ function App() @{
               />}
             </table.Subscribe>
           </td>
-          <td colSpan={20}>
+          <td colspan={20}>
             Page Rows ({String(table.getRowModel().rows.length)})
           </td>
         </tr>
diff --git a/examples/octane/cell-spanning/src/main.tsrx b/examples/octane/cell-spanning/src/main.tsrx
index 78de73474f..d6844b75aa 100644
--- a/examples/octane/cell-spanning/src/main.tsrx
+++ b/examples/octane/cell-spanning/src/main.tsrx
@@ -175,7 +175,7 @@ function App() @{
       {table.getHeaderGroups().map((headerGroup) => (
         <tr key={headerGroup.id}>
           {headerGroup.headers.map((header) => (
-            <th key={header.id} colSpan={header.colSpan}>
+            <th key={header.id} colspan={header.colSpan}>
               <button
                 type="button"
                 className="sortable-header header-sort-button"
@@ -315,7 +315,7 @@ function App() @{
                     const colSpan = cell.getColSpan()
 
                     // A span of 0 means this cell is covered by a cell above
-                    // or to its left. Skip it. Do NOT render `rowSpan={0}`:
+                    // or to its left. Skip it. Do NOT render `rowspan={0}`:
                     // in HTML that means "span to the end of the row group",
                     // so forgetting this check merges the cell down the whole
                     // tbody instead of rendering nothing.
@@ -324,8 +324,8 @@ function App() @{
                     return (
                       <td
                         key={cell.id}
-                        rowSpan={rowSpan}
-                        colSpan={colSpan}
+                        rowspan={rowSpan}
+                        colspan={colSpan}
                         className={getCellClassName(cell)}
                         onMouseDown={cell.getSelectionStartHandler()}
                         onMouseEnter={cell.getSelectionExtendHandler()}
@@ -368,7 +368,7 @@ function App() @{
               {summaryTable.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
                   {headerGroup.headers.map((header) => (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       <summaryTable.FlexRender header={header} />
                     </th>
                   ))}
@@ -392,7 +392,7 @@ function App() @{
                     if (rowSpan === 0 || colSpan === 0) return null
 
                     return (
-                      <td key={cell.id} rowSpan={rowSpan} colSpan={colSpan}>
+                      <td key={cell.id} rowspan={rowSpan} colspan={colSpan}>
                         <summaryTable.FlexRender cell={cell} />
                       </td>
                     )
diff --git a/examples/octane/column-ordering/src/main.tsrx b/examples/octane/column-ordering/src/main.tsrx
index fc0ebfda87..01c967cbef 100644
--- a/examples/octane/column-ordering/src/main.tsrx
+++ b/examples/octane/column-ordering/src/main.tsrx
@@ -148,7 +148,7 @@ function App() @{
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th key={header.id} colspan={header.colSpan}>
                   {header.isPlaceholder ? null : (
                     <table.FlexRender header={header} />
                   )}
@@ -172,7 +172,7 @@ function App() @{
           {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
               {footerGroup.headers.map((header) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th key={header.id} colspan={header.colSpan}>
                   {header.isPlaceholder ? null : (
                     <table.FlexRender footer={header} />
                   )}
diff --git a/examples/octane/column-pinning-split/src/main.tsrx b/examples/octane/column-pinning-split/src/main.tsrx
index 4676df8ddd..1c368b211e 100644
--- a/examples/octane/column-pinning-split/src/main.tsrx
+++ b/examples/octane/column-pinning-split/src/main.tsrx
@@ -155,7 +155,7 @@ function App() @{
             {table.getStartHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     <div className="nowrap">
                       {header.isPlaceholder ? null : (
                         <table.FlexRender header={header} />
@@ -224,7 +224,7 @@ function App() @{
             {table.getCenterHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     <div className="nowrap">
                       {header.isPlaceholder ? null : (
                         <table.FlexRender header={header} />
@@ -293,7 +293,7 @@ function App() @{
             {table.getEndHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     <div className="nowrap">
                       {header.isPlaceholder ? null : (
                         <table.FlexRender header={header} />
diff --git a/examples/octane/column-pinning-sticky/src/main.tsrx b/examples/octane/column-pinning-sticky/src/main.tsrx
index e9eaef5923..a18be03377 100644
--- a/examples/octane/column-pinning-sticky/src/main.tsrx
+++ b/examples/octane/column-pinning-sticky/src/main.tsrx
@@ -193,7 +193,7 @@ function App() @{
                   return (
                     <th
                       key={header.id}
-                      colSpan={header.colSpan}
+                      colspan={header.colSpan}
                       // IMPORTANT: This is where the magic happens!
                       style={{ ...getCommonPinningStyles(column) }}
                     >
diff --git a/examples/octane/column-pinning/src/main.tsrx b/examples/octane/column-pinning/src/main.tsrx
index 7d0e4495e4..989cda1605 100644
--- a/examples/octane/column-pinning/src/main.tsrx
+++ b/examples/octane/column-pinning/src/main.tsrx
@@ -158,7 +158,7 @@ function App() @{
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     <div className="nowrap">
                       {header.isPlaceholder ? null : (
                         <table.FlexRender header={header} />
diff --git a/examples/octane/column-resizing-performant/src/main.tsrx b/examples/octane/column-resizing-performant/src/main.tsrx
index d128e49ad2..f0e9911a15 100644
--- a/examples/octane/column-resizing-performant/src/main.tsrx
+++ b/examples/octane/column-resizing-performant/src/main.tsrx
@@ -153,7 +153,7 @@ function App() @{
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    colSpan={header.colSpan}
+                    colspan={header.colSpan}
                     style={{
                       display: 'flex',
                       flexShrink: 0,
diff --git a/examples/octane/column-resizing/src/main.tsrx b/examples/octane/column-resizing/src/main.tsrx
index 1454913daa..9e2e909506 100644
--- a/examples/octane/column-resizing/src/main.tsrx
+++ b/examples/octane/column-resizing/src/main.tsrx
@@ -135,7 +135,7 @@ function App() @{
                   {headerGroup.headers.map((header) => (
                     <th
                       key={header.id}
-                      colSpan={header.colSpan}
+                      colspan={header.colSpan}
                       style={{
                         width: header.getSize(),
                       }}
diff --git a/examples/octane/column-sizing/src/main.tsrx b/examples/octane/column-sizing/src/main.tsrx
index dc66bc1e6f..c61b76e96a 100644
--- a/examples/octane/column-sizing/src/main.tsrx
+++ b/examples/octane/column-sizing/src/main.tsrx
@@ -120,7 +120,7 @@ function App() @{
                 {headerGroup.headers.map((header) => (
                   <th
                     key={header.id}
-                    colSpan={header.colSpan}
+                    colspan={header.colSpan}
                     style={{
                       width: header.getSize(),
                     }}
diff --git a/examples/octane/column-visibility/src/main.tsrx b/examples/octane/column-visibility/src/main.tsrx
index d235c4d260..da868851e1 100644
--- a/examples/octane/column-visibility/src/main.tsrx
+++ b/examples/octane/column-visibility/src/main.tsrx
@@ -120,7 +120,7 @@ function App() @{
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th key={header.id} colspan={header.colSpan}>
                   {header.isPlaceholder ? null : (
                     <table.FlexRender header={header} />
                   )}
@@ -144,7 +144,7 @@ function App() @{
           {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
               {footerGroup.headers.map((header) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th key={header.id} colspan={header.colSpan}>
                   {header.isPlaceholder ? null : (
                     <table.FlexRender footer={header} />
                   )}
diff --git a/examples/octane/composable-tables/src/main.tsrx b/examples/octane/composable-tables/src/main.tsrx
index 2e1cf797e1..14542f1e5c 100644
--- a/examples/octane/composable-tables/src/main.tsrx
+++ b/examples/octane/composable-tables/src/main.tsrx
@@ -114,7 +114,7 @@ function UsersTable() @{
                     <table.AppHeader header={h} key={h.id}>
                       {(header) => (
                         <th
-                          colSpan={header.colSpan}
+                          colspan={header.colSpan}
                           className={
                             header.column.getCanSort() ? 'sortable-header' : ''
                           }
@@ -173,7 +173,7 @@ function UsersTable() @{
                         )
 
                         return (
-                          <td colSpan={footer.colSpan}>
+                          <td colspan={footer.colSpan}>
                             {footer.isPlaceholder ? null : (
                               <>
                                 {/* Use FooterSum for numeric columns, FooterColumnId for others */}
@@ -314,7 +314,7 @@ function ProductsTable() @{
                     <table.AppHeader header={h} key={h.id}>
                       {(header) => (
                         <th
-                          colSpan={header.colSpan}
+                          colspan={header.colSpan}
                           className={
                             header.column.getCanSort() ? 'sortable-header' : ''
                           }
@@ -372,7 +372,7 @@ function ProductsTable() @{
                         )
 
                         return (
-                          <td colSpan={footer.colSpan}>
+                          <td colspan={footer.colSpan}>
                             {footer.isPlaceholder ? null : (
                               <>
                                 {/* Use FooterSum for numeric columns, FooterColumnId for others */}
diff --git a/examples/octane/custom-plugin/src/main.tsrx b/examples/octane/custom-plugin/src/main.tsrx
index 2911b42b31..5b5f4108d7 100644
--- a/examples/octane/custom-plugin/src/main.tsrx
+++ b/examples/octane/custom-plugin/src/main.tsrx
@@ -219,7 +219,7 @@ function App() @{
                 return (
                   <th
                     key={header.id}
-                    colSpan={header.colSpan}
+                    colspan={header.colSpan}
                     style={{
                       // using our new feature
                       padding:
diff --git a/examples/octane/expanding/src/main.tsrx b/examples/octane/expanding/src/main.tsrx
index bed178a1ad..2fd92ca1c6 100644
--- a/examples/octane/expanding/src/main.tsrx
+++ b/examples/octane/expanding/src/main.tsrx
@@ -182,7 +182,7 @@ function App() @{
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         <table.FlexRender header={header} />
diff --git a/examples/octane/filters-faceted-bucketed/src/main.tsrx b/examples/octane/filters-faceted-bucketed/src/main.tsrx
index 55d4b5ae14..d25642eb31 100644
--- a/examples/octane/filters-faceted-bucketed/src/main.tsrx
+++ b/examples/octane/filters-faceted-bucketed/src/main.tsrx
@@ -213,7 +213,7 @@ function App() @{
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <>
                         <div className="header-label">
diff --git a/examples/octane/filters-faceted/src/main.tsrx b/examples/octane/filters-faceted/src/main.tsrx
index 583a94f0a9..945768607c 100644
--- a/examples/octane/filters-faceted/src/main.tsrx
+++ b/examples/octane/filters-faceted/src/main.tsrx
@@ -126,7 +126,7 @@ function App() @{
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <>
                         <div>
diff --git a/examples/octane/filters-fuzzy/src/main.tsrx b/examples/octane/filters-fuzzy/src/main.tsrx
index 460f1a78d0..54bd895f46 100644
--- a/examples/octane/filters-fuzzy/src/main.tsrx
+++ b/examples/octane/filters-fuzzy/src/main.tsrx
@@ -189,7 +189,7 @@ function App() @{
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <>
                         <div
diff --git a/examples/octane/filters/src/main.tsrx b/examples/octane/filters/src/main.tsrx
index d5351063a4..8b032b507c 100644
--- a/examples/octane/filters/src/main.tsrx
+++ b/examples/octane/filters/src/main.tsrx
@@ -137,7 +137,7 @@ function App() @{
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <>
                         <div>
diff --git a/examples/octane/grouped-aggregation/src/main.tsrx b/examples/octane/grouped-aggregation/src/main.tsrx
index 3424de41bf..90fa30c052 100644
--- a/examples/octane/grouped-aggregation/src/main.tsrx
+++ b/examples/octane/grouped-aggregation/src/main.tsrx
@@ -146,7 +146,7 @@ function App() @{
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         {header.column.getCanGroup() ? (
@@ -220,7 +220,7 @@ function App() @{
           {table.getFooterGroups().map((footerGroup) => (
             <tr key={footerGroup.id}>
               {footerGroup.headers.map((header) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th key={header.id} colspan={header.colSpan}>
                   {header.isPlaceholder ? null : (
                     <table.FlexRender footer={header} />
                   )}
diff --git a/examples/octane/grouping/src/main.tsrx b/examples/octane/grouping/src/main.tsrx
index 1f6c1923ae..f638908019 100644
--- a/examples/octane/grouping/src/main.tsrx
+++ b/examples/octane/grouping/src/main.tsrx
@@ -115,7 +115,7 @@ function App() @{
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         {header.column.getCanGroup() ? (
diff --git a/examples/octane/header-groups/src/main.tsrx b/examples/octane/header-groups/src/main.tsrx
index d563037e08..d44d3ab148 100644
--- a/examples/octane/header-groups/src/main.tsrx
+++ b/examples/octane/header-groups/src/main.tsrx
@@ -263,7 +263,7 @@ function App() @{
               {basicTable.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
                   {headerGroup.headers.map((header) => (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       <basicTable.FlexRender header={header} />
                     </th>
                   ))}
@@ -295,7 +295,7 @@ function App() @{
                 .map((footerGroup) => (
                   <tr key={footerGroup.id}>
                     {footerGroup.headers.map((header) => (
-                      <th key={header.id} colSpan={header.colSpan}>
+                      <th key={header.id} colspan={header.colSpan}>
                         {header.isPlaceholder ? null : (
                           <basicTable.FlexRender footer={header} />
                         )}
@@ -314,7 +314,7 @@ function App() @{
               {nestedTable.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
                   {headerGroup.headers.map((header) => (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       <nestedTable.FlexRender header={header} />
                     </th>
                   ))}
@@ -342,7 +342,7 @@ function App() @{
               {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
                   {headerGroup.headers.map((header) => (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <table.FlexRender header={header} />
                       )}
@@ -366,7 +366,7 @@ function App() @{
               {table.getFooterGroups().map((footerGroup) => (
                 <tr key={footerGroup.id}>
                   {footerGroup.headers.map((header) => (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <table.FlexRender footer={header} />
                       )}
@@ -388,8 +388,8 @@ function App() @{
                     header.rowSpan === 0 ? null : (
                       <th
                         key={header.id}
-                        colSpan={header.colSpan}
-                        rowSpan={header.rowSpan}
+                        colspan={header.colSpan}
+                        rowspan={header.rowSpan}
                       >
                         <unevenTable.FlexRender header={header} />
                       </th>
diff --git a/examples/octane/kitchen-sink/src/main.tsrx b/examples/octane/kitchen-sink/src/main.tsrx
index 4a316232df..594c2bafe3 100644
--- a/examples/octane/kitchen-sink/src/main.tsrx
+++ b/examples/octane/kitchen-sink/src/main.tsrx
@@ -285,10 +285,10 @@ function TableHeader({
   }
 
   if (header.isPlaceholder) {
-    return <th style={style} colSpan={header.colSpan} />
+    return <th style={style} colspan={header.colSpan} />
   }
 
-  <th style={style} colSpan={header.colSpan}>
+  <th style={style} colspan={header.colSpan}>
       <div className="header-row">
         <div style={{ flex: 1, minWidth: 0 }}>
           <div className="header-controls">
diff --git a/examples/octane/pagination/src/main.tsrx b/examples/octane/pagination/src/main.tsrx
index 1e99e21fb2..7ca26dfa1a 100644
--- a/examples/octane/pagination/src/main.tsrx
+++ b/examples/octane/pagination/src/main.tsrx
@@ -106,7 +106,7 @@ function MyTable({
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     <div>
                       <table.FlexRender header={header} />
                     </div>
diff --git a/examples/octane/realtime-trading/src/table/TradingTable.tsrx b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
index ca3e74eb83..bd2a4c52ea 100644
--- a/examples/octane/realtime-trading/src/table/TradingTable.tsrx
+++ b/examples/octane/realtime-trading/src/table/TradingTable.tsrx
@@ -161,7 +161,7 @@ export function TradingTable({ controller, feed }: TradingTableProps) @{
                 const leaf = header.subHeaders.length === 0
                 const sorted = header.column.getIsSorted()
                 <th
-                  colSpan={header.colSpan}
+                  colspan={header.colSpan}
                   style={{ width: `calc(var(--header-${header.id}-size) * 1px)` }}
                   aria-sort={leaf ? sortAriaValue(sorted) : undefined}
                   className={`${!leaf ? 'column-group-header' : ''} ${leaf && !['market', 'name', 'symbol'].includes(header.column.id) ? 'numeric-header' : ''}`}
diff --git a/examples/octane/row-pinning/src/main.tsrx b/examples/octane/row-pinning/src/main.tsrx
index bca08824aa..9718a3e39a 100644
--- a/examples/octane/row-pinning/src/main.tsrx
+++ b/examples/octane/row-pinning/src/main.tsrx
@@ -192,7 +192,7 @@ function App() @{
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   return (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <>
                           <table.FlexRender header={header} />
diff --git a/examples/octane/row-selection/src/main.tsrx b/examples/octane/row-selection/src/main.tsrx
index cc61d91cf7..82fae98ce5 100644
--- a/examples/octane/row-selection/src/main.tsrx
+++ b/examples/octane/row-selection/src/main.tsrx
@@ -149,7 +149,7 @@ function App() @{
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   return (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <>
                           <table.FlexRender header={header} />
@@ -190,7 +190,7 @@ function App() @{
                   onChange={table.getToggleAllPageRowsSelectedHandler()}
                 />
               </td>
-              <td colSpan={20}>
+              <td colspan={20}>
                 Page Rows ({table.getRowModel().rows.length.toLocaleString()})
               </td>
             </tr>
diff --git a/examples/octane/sorting/src/main.tsrx b/examples/octane/sorting/src/main.tsrx
index 767cc08b81..0b8bb1b9fb 100644
--- a/examples/octane/sorting/src/main.tsrx
+++ b/examples/octane/sorting/src/main.tsrx
@@ -132,7 +132,7 @@ function App() @{
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   return (
-                    <th key={header.id} colSpan={header.colSpan}>
+                    <th key={header.id} colspan={header.colSpan}>
                       {header.isPlaceholder ? null : (
                         <div
                           className={
diff --git a/examples/octane/sub-components/src/main.tsrx b/examples/octane/sub-components/src/main.tsrx
index d53fef8bba..429b49edd0 100644
--- a/examples/octane/sub-components/src/main.tsrx
+++ b/examples/octane/sub-components/src/main.tsrx
@@ -111,7 +111,7 @@ function Table({
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <th key={header.id} colSpan={header.colSpan}>
+                  <th key={header.id} colspan={header.colSpan}>
                     {header.isPlaceholder ? null : (
                       <div>
                         <table.FlexRender header={header} />
@@ -140,7 +140,7 @@ function Table({
                 {row.getIsExpanded() && (
                   <tr>
                     {/* 2nd row is a custom 1 cell row */}
-                    <td colSpan={row.getAllCells().length}>
+                    <td colspan={row.getAllCells().length}>
                       {renderSubComponent({ row })}
                     </td>
                   </tr>
diff --git a/packages/octane-table/tests/_fixtures/features.tsrx b/packages/octane-table/tests/_fixtures/features.tsrx
index ff544bf8c4..ca0abf531d 100644
--- a/packages/octane-table/tests/_fixtures/features.tsrx
+++ b/packages/octane-table/tests/_fixtures/features.tsrx
@@ -195,7 +195,7 @@ export function VisibilityTable() @{
 				@for (const hg of table.getHeaderGroups(); key hg.id) {
 					<tr>
 						@for (const header of hg.headers; key header.id) {
-							<th id={'v-th-' + header.id} colSpan={header.colSpan}>
+							<th id={'v-th-' + header.id} colspan={header.colSpan}>
 								{header.isPlaceholder
 									? null
 									: flexRender(header.column.columnDef.header, header.getContext())}