var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(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 p(e))!f.call(n,o)&&o!==t&&l(n,o,{get:()=>e[o],enumerable:!(r=h(e,o))||r.enumerable});return n};var T=(n,e,t)=>(t=n!=null?m(b(n)):{},c(e||!n||!n.__esModule?l(t,"default",{value:n,enumerable:!0}):t,n)),D=n=>c(l({},"__esModule",{value:!0}),n);var s=x((y,i)=>{i.exports=_jsx_runtime});var w={};g(w,{default:()=>u,frontmatter:()=>B});var a=T(s()),B={id:"data-table",title:"DataTable",description:"A basic data table component that supports sorting and selections."};function d(n){let e={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...n.components},{ComponentLinks:t}=e;return t||k("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 u(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function k(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(w);})(); ;return Component;