docs(table): document align, size and variant props

docs/app/docs/components/table/content.mdx

@@ -1,6 +1,7 @@
 import Documentation from '@/components/layout/Documentation/Documentation';
 import TableExample from "./docs/example_1"
-import {code, anatomy, api_documentation} from "./docs/codeUsage"
+import TableDenseExample from "./docs/example_2"
+import {code, denseCode, anatomy, api_documentation} from "./docs/codeUsage"
 
 <Documentation
     title={`Table`}
@@ -12,6 +13,12 @@ import {code, anatomy, api_documentation} from "./docs/codeUsage"
         <TableExample />
     </Documentation.ComponentHero>
 
+    <Documentation.ComponentHero title="Alignment and density" codeUsage={denseCode}>
+        <TableDenseExample />
+    </Documentation.ComponentHero>
+
+    Pass `align="end"` on a column's header and cells so numbers line up on their last digit (the table uses tabular figures). `size="small"` tightens rows for dense data, `size="large"` relaxes them. `variant="ghost"` drops the frame and header background when the table sits inside its own panel.
+
     <Documentation.ApiReference
         anatomy={anatomy.code}
         tables={api_documentation}

docs/app/docs/components/table/docs/codeUsage.js

@@ -3,6 +3,7 @@ import Text from '@radui/ui/Text';
 import { getSourceCodeFromPath } from '@/utils/parseSourceCode';
 
 const example_1_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/table/docs/example_1.tsx');
+const example_2_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/table/docs/example_2.tsx');
 
 const scss_SourceCode = await getSourceCodeFromPath('styles/themes/components/table.scss');
 const anatomy_SourceCode = await getSourceCodeFromPath('docs/app/docs/components/table/docs/anatomy.tsx');
@@ -37,4 +38,10 @@ export const api_documentation = {
     cell: cell_api_SourceCode
 }
 
-export default code
+export default code
+
+export const denseCode = {
+    javascript: {
+        code: example_2_SourceCode
+    }
+};

docs/app/docs/components/table/docs/component_api/cell.tsx

@@ -40,7 +40,16 @@ const data = {
         type : "boolean",
         default : "false",
        },
-    ]
+       {
+        prop : {
+            name : "align",
+            info_tooltips : "Horizontal alignment of the content. Use end for numeric columns so digits line up."
+        },
+        type : "enum",
+        enum_values : ["start", "center", "end"],
+        default : "'start'",
+       },
+]
 }
 
 export default data;

docs/app/docs/components/table/docs/component_api/column-header.tsx

@@ -40,7 +40,16 @@ const data = {
         type : "boolean",
         default : "false",
        },
-    ]
+       {
+        prop : {
+            name : "align",
+            info_tooltips : "Horizontal alignment of the content. Use end for numeric columns so digits line up."
+        },
+        type : "enum",
+        enum_values : ["start", "center", "end"],
+        default : "'start'",
+       },
+]
 }
 
 export default data;

docs/app/docs/components/table/docs/component_api/root.tsx

@@ -40,7 +40,42 @@ const data = {
         type : "string",
         default : "''",
        },
-    ]
+       {
+        prop : {
+            name : "size",
+            info_tooltips : "Row density: small, medium or large."
+        },
+        type : "enum",
+        enum_values : ["small", "medium", "large"],
+        default : "'medium'",
+       },
+       {
+        prop : {
+            name : "variant",
+            info_tooltips : "surface draws a framed panel with a header background; ghost sits directly on the page with only row dividers."
+        },
+        type : "enum",
+        enum_values : ["surface", "ghost"],
+        default : "'surface'",
+       },
+       {
+        prop : {
+            name : "resizable",
+            info_tooltips : "Enables column resizing. Pass columnIndex to headers and cells and render a ColumnResizeHandle in each header."
+        },
+        type : "boolean",
+        default : "false",
+       },
+       {
+        prop : {
+            name : "resizeHandleVisibility",
+            info_tooltips : "When resizable, show the handles on hover or always."
+        },
+        type : "enum",
+        enum_values : ["hover", "always"],
+        default : "'hover'",
+       },
+]
 }
 
 export default data;

docs/app/docs/components/table/docs/example_2.tsx

@@ -0,0 +1,46 @@
+"use client"
+import Table from "@radui/ui/Table";
+
+const columns = [
+  { name: 'Area', id: 'area', align: 'start' },
+  { name: 'Restaurants', id: 'restaurants', align: 'end' },
+  { name: 'Orders / month', id: 'orders', align: 'end' },
+  { name: 'Dominant phase', id: 'phase', align: 'start' },
+  { name: 'Minutes wasted / day', id: 'minutes', align: 'end' }
+] as const;
+
+const data = [
+  { id: '1', area: 'Serilingampally', restaurants: 3, orders: '14,474', phase: 'Parking', minutes: '2,610' },
+  { id: '2', area: 'Sai Tulasi Layout', restaurants: 3, orders: '3,980', phase: 'Entry', minutes: '1,007' },
+  { id: '3', area: 'Kondapur', restaurants: 4, orders: '3,606', phase: 'Parking', minutes: '555' },
+  { id: '4', area: 'Sri Ram Nagar', restaurants: 2, orders: '2,570', phase: 'Collection', minutes: '397' }
+];
+
+const TableDenseExample = () => (
+  <div className="w-full max-w-3xl">
+    <Table.Root size="small">
+      <Table.Head>
+        <Table.Row>
+          {columns.map((column) => (
+            <Table.ColumnCellHeader key={column.id} align={column.align}>
+              {column.name}
+            </Table.ColumnCellHeader>
+          ))}
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {data.map((row) => (
+          <Table.Row key={row.id}>
+            {columns.map((column) => (
+              <Table.Cell key={`${row.id}-${column.id}`} align={column.align}>
+                {row[column.id]}
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  </div>
+);
+
+export default TableDenseExample;