var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var t in e)l(n,t,{get:e[t],enumerable:!0})},c=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!b.call(n,o)&&o!==t&&l(n,o,{get:()=>e[o],enumerable:!(r=m(e,o))||r.enumerable});return n};var g=(n,e,t)=>(t=n!=null?u(p(n)):{},c(e||!n||!n.__esModule?l(t,"default",{value:n,enumerable:!0}):t,n)),T=n=>c(l({},"__esModule",{value:!0}),n);var s=f((y,i)=>{i.exports=_jsx_runtime});var S={};x(S,{default:()=>k,frontmatter:()=>D});var a=g(s()),D={id:"data-table",title:"DataTable",description:"A basic data table component that supports sorting and selections."};function d(n){let e=Object.assign({p:"p",h2:"h2",pre:"pre",code:"code",a:"a",h3:"h3"},n.components),{ComponentLinks:t}=e;return t||w("ComponentLinks",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:"Data tables are used to organize lists of high density data."}),` `,(0,a.jsx)(t,{github:{package:"saas-ui-data-table"},npm:{package:"@saas-ui/data-table"},theme:{theme:"chakra",componentName:"table"}}),` `,(0,a.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-ts",children:`import { DataTable } from '@saas-ui/react' `})}),` `,(0,a.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,a.jsxs)(e.p,{children:["DataTable uses ",(0,a.jsx)(e.code,{children:"@tanstack/react-table"})," v8 internally and supports all TableOptions which allows you to extend the DataTable with pagination, column resizing, filtering and more, see the ",(0,a.jsx)(e.a,{href:"https://tanstack.com/table/v8/docs/api/core/table",children:"TanStack table documentation"})," for more information."]}),` `,(0,a.jsxs)(e.p,{children:["Check out the ",(0,a.jsx)(e.a,{href:"#full-example",children:"full example"})," on the bottom of this page to see how to format columns and your data."]}),` `,(0,a.jsx)(e.h3,{id:"basic",children:"Basic"}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:`import { Box } from '@chakra-ui/react' import { DataTable } from '@saas-ui/react' export default function Basic() { return ( ) } `})}),` `,(0,a.jsx)(e.h3,{id:"table-sizing",children:"Table sizing"}),` `,(0,a.jsxs)(e.p,{children:["The table component is available in 3 sizes: ",(0,a.jsx)(e.code,{children:"sm"}),", ",(0,a.jsx)(e.code,{children:"md"}),", ",(0,a.jsx)(e.code,{children:"lg"}),". The default size is ",(0,a.jsx)(e.code,{children:"md"}),"."]}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:`import { Box } from '@chakra-ui/react' import { DataTable } from '@saas-ui/react' export default function Basic() { return ( ) } `})}),` `,(0,a.jsx)(e.h3,{id:"sortable",children:"Sortable"}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:`import { Box } from '@chakra-ui/react' import { DataTable } from '@saas-ui/react' export default function Sortable() { return ( ) } `})}),` `,(0,a.jsx)(e.h3,{id:"selectable",children:"Selectable"}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:`import { Box } from '@chakra-ui/react' import { DataTable } from '@saas-ui/react' export default function Selectable() { return ( console.log(selected)} /> ) } `})}),` `,(0,a.jsx)(e.h3,{id:"access-internal-state",children:"Access internal state"}),` `,(0,a.jsxs)(e.p,{children:["You can access the react-table ",(0,a.jsx)(e.code,{children:"TableInstance"})," by passing a ref to ",(0,a.jsx)(e.code,{children:"DataTable"}),`. Check out the `,(0,a.jsx)(e.a,{href:"https://tanstack.com/table/v8/docs/api/core/table",children:"react-table documentation"})," for all properties."]}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:`import { Box, Button, ButtonGroup } from '@chakra-ui/react' import { DataTable } from '@saas-ui/react' export default function TableState() { const tableRef = useRef(null) return ( ) } `})}),` `,(0,a.jsx)(e.h3,{id:"full-example",children:"Full example"}),` `,(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-jsx",children:`import { ColumnDef } from '@saas-ui/react' interface ExampleData { id: string name: string email: string } const columns: ColumnDef[] = [ { accessorKey: 'id', header: 'Id', }, { accessorKey: 'name', header: 'Name', }, { accessorKey: 'email', header: 'Email', }, ] const data: ExampleData[] = [ { id: '1', name: 'TaShya Charles', email: 'urna.nec.luctus@icloud.couk' }, { id: '2', name: 'Donovan Mosley', email: 'lacinia.mattis.integer@icloud.couk', }, ] export default function TypeScript() { return columns={columns} data={data} /> } `})})]})}function B(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,Object.assign({},n,{children:(0,a.jsx)(d,n)})):d(n)}var k=B;function w(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(S);})(); ;return Component;