[{"_1":2,"_56":-5,"_57":-5},"loaderData",{"_3":4,"_7":8},"root",{"_5":6},"version","1.0.20","routes/docs.components.$type.$name.($page)",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_46":47},"type","core","key","table/introduction","page","introduction","name","table","doc",{"_19":20,"_21":22,"_23":16,"_24":25,"_30":31,"_32":33,"_9":43,"_44":45},"title","","published",true,"component","body",{"_26":27,"_28":29},"raw","\n\n\n\n \n\n\n\n
\n\n\nOur table family components are just minimal theme wrappers over native HTML table elements.\nThe source code is straightforward and simple, so I recommend heading to the [API reference page](./../api)\nto see how to use it with **TanStack Table**.\n\n\n\n\n \n Why don't we encapsulate **TanStack Table**?\n \n You might see us encapsulating RHF (**React Hook Form**) in our [form component](./../../form/introduction),\n but that doesn't mean we should always encapsulate headless UI frameworks.\n\n It really depends on how the headless UI framework is designed.\n\n RHF provides hooks and a few React components. Using RHF directly requires setting up non-trivial boilerplate code,\n especially for complex forms. More importantly, it would impact how smoothly you can use form components in a compositional way -\n that's why encapsulation makes sense there.\n\n **TanStack Table**, however, mainly provides hooks. There's little benefit for users with an encapsulated version, and it won't make you 10x more productive.\n \n \n\n","code","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var Q=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),A=(n,e)=>{for(var o in e)s(n,o,{get:e[o],enumerable:!0})},h=(n,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of T(e))!x.call(n,r)&&r!==o&&s(n,r,{get:()=>e[r],enumerable:!(i=y(e,r))||i.enumerable});return n};var v=(n,e,o)=>(o=n!=null?b(k(n)):{},h(e||!n||!n.__esModule?s(o,\"default\",{value:n,enumerable:!0}):o,n)),I=n=>h(s({},\"__esModule\",{value:!0}),n);var f=Q((S,p)=>{p.exports=_jsx_runtime});var j={};A(j,{default:()=>g,frontmatter:()=>_});var t=v(f()),_={component:\"table\"};function w(n){let e={a:\"a\",p:\"p\",strong:\"strong\",...n.components},{QA2:o,QA2Content:i,QA2Item:r,QA2Trigger:l,QASection:c,QuickDemoSection:d,VersatileTabs2:m,VersatileTabs2Content:u}=e;return o||a(\"QA2\",!0),i||a(\"QA2Content\",!0),r||a(\"QA2Item\",!0),l||a(\"QA2Trigger\",!0),c||a(\"QASection\",!0),d||a(\"QuickDemoSection\",!0),m||a(\"VersatileTabs2\",!0),u||a(\"VersatileTabs2Content\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(d,{}),`\n`,(0,t.jsx)(m,{defaultValue:\"table-default-demo\",compact:!0,children:(0,t.jsx)(u,{value:\"table-default-demo\",demoId:\"table-default-demo\",showCode:!1})}),`\n`,(0,t.jsx)(\"br\",{}),`\n`,(0,t.jsxs)(e.p,{children:[`Our table family components are just minimal theme wrappers over native HTML table elements.\nThe source code is straightforward and simple, so I recommend heading to the `,(0,t.jsx)(e.a,{href:\"./../api\",children:\"API reference page\"}),`\nto see how to use it with `,(0,t.jsx)(e.strong,{children:\"TanStack Table\"}),\".\"]}),`\n`,(0,t.jsx)(c,{}),`\n`,(0,t.jsx)(o,{children:(0,t.jsxs)(r,{children:[(0,t.jsxs)(l,{id:\"why-not-encapsulate-tanstack\",children:[\"Why don't we encapsulate \",(0,t.jsx)(e.strong,{children:(0,t.jsx)(\"u\",{children:\"TanStack Table\"})}),\"?\"]}),(0,t.jsxs)(i,{children:[(0,t.jsxs)(e.p,{children:[\"You might see us encapsulating RHF (\",(0,t.jsx)(e.strong,{children:\"React Hook Form\"}),\") in our \",(0,t.jsx)(e.a,{href:\"./../../form/introduction\",children:\"form component\"}),`,\nbut that doesn't mean we should always encapsulate headless UI frameworks.`]}),(0,t.jsx)(e.p,{children:\"It really depends on how the headless UI framework is designed.\"}),(0,t.jsx)(e.p,{children:`RHF provides hooks and a few React components. Using RHF directly requires setting up non-trivial boilerplate code,\nespecially for complex forms. More importantly, it would impact how smoothly you can use form components in a compositional way -\nthat's why encapsulation makes sense there.`}),(0,t.jsxs)(e.p,{children:[(0,t.jsx)(e.strong,{children:\"TanStack Table\"}),\", however, mainly provides hooks. There's little benefit for users with an encapsulated version, and it won't make you 10x more productive.\"]})]})]})})]})}function g(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(w,{...n})}):w(n)}function a(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return I(j);})();\n;return Component;","_id","components/ui/Table/Table.introduction.mdx","_raw",{"_34":31,"_35":36,"_37":38,"_39":40,"_41":42},"sourceFilePath","sourceFileName","Table.introduction.mdx","sourceFileDir","components/ui/Table","contentType","mdx","flattenedPath","components/ui/Table/Table.introduction","Doc","url","/components/ui/table/table.introduction","meta",{"_48":49,"_50":51,"_54":55},"description","A responsive table component.","tags",{"_3":52},[53],"WIP","anatomy","\n \n\n \n \n \n {/* more ... */}\n \n \n\n \n \n \n {/* more ... */}\n \n \n\n \n \n \n {/* more ... */}\n \n \n\n \n\n

\n ","actionData","errors"]

table/introduction

Quick Demo

Q&A

Why don't we encapsulate TanStack Table?