docs: add documentation for DataTable (#11095)

* docs: add documentation for DataTable

* update package versions

www/apps/ui/src/components/component-example.tsx

@@ -10,11 +10,13 @@ import { ExampleRegistry } from "@/registries/example-registry"
 
 interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string
+  disableCenterAlignPreview?: boolean
 }
 
 export function ComponentExample({
   children,
   name,
+  disableCenterAlignPreview = false,
   ...props
 }: ComponentExampleProps) {
   const Preview = React.useMemo(() => {
@@ -45,7 +47,8 @@ export function ComponentExample({
             <div
               className={clx(
                 "bg-medusa-bg-base border-medusa-border-base flex max-h-[400px] min-h-[400px]",
-                "w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
+                "w-full overflow-auto justify-center rounded-md border px-10 py-5",
+                !disableCenterAlignPreview && "items-center"
               )}
             >
               <React.Suspense