1import{M as i}from"./index-CZruN2I3.js";import{b as l,m as d}from"./web-Daoi1TEa.js";function a(r){const e=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h2:"h2",p:"p",a:"a",strong:"strong",ul:"ul",li:"li",ol:"ol",h3:"h3"},i(),r.components),{MDXHeader:c,ComponentPreview:o,Callout:t,Steps:n}=e;return t||s("Callout"),o||s("ComponentPreview"),c||s("MDXHeader"),n||s("Steps"),[l(c,{title:"Data Table",description:"Powerful table and datagrids built using TanStack Table.",docs:"https://tanstack.com/table/v8/docs/introduction"}),` 2`,l(o,{name:"data-table-demo",get children(){return l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { createSignal, For } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"solid-js"'})]}}),` 3`,l(e.span,{"data-line":"",children:" "}),` 4`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"type"}),l(e.span,{style:{color:"#E1E4E8"},children:" { ColumnFiltersState, SortingState, VisibilityState } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 5`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 6`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" createSolidTable,"})}}),` 7`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" flexRender,"})}}),` 8`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel,"})}}),` 9`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getFilteredRowModel,"})}}),` 10`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel,"})}}),` 11`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel,"})}}),` 12`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"type"}),l(e.span,{style:{color:"#E1E4E8"},children:" ColumnDef"})]}}),` 13`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 14`,l(e.span,{"data-line":"",children:" "}),` 15`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { IconChevronDown, IconDots, IconSelector } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/icons"'})]}}),` 16`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/button"'})]}}),` 17`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Checkbox } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/checkbox"'})]}}),` 18`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 19`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenu,"})}}),` 20`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuCheckboxItem,"})}}),` 21`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuContent,"})}}),` 22`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuItem,"})}}),` 23`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuLabel,"})}}),` 24`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuSeparator,"})}}),` 25`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuTrigger"})}}),` 26`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/dropdown-menu"'})]}}),` 27`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/table"'})]}}),` 28`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { TextField, TextFieldInput } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/text-field"'})]}}),` 29`,l(e.span,{"data-line":"",children:" "}),` 30`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"data"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:"[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 31`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 32`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"m5gr84i9"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 33`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"316"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 34`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"success"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 35`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 36`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 37`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 38`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"3u1reuv4"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 39`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"242"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 40`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"success"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 41`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 42`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 43`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 44`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"derv1ws0"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 45`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"837"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 46`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"processing"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 47`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 48`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 49`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 50`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"5kma53ae"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 51`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"874"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 52`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"success"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 53`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 54`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 55`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 56`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"bhqecj4p"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 57`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"721"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 58`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"failed"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 59`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 60`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 61`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}}),` 62`,l(e.span,{"data-line":"",children:" "}),` 63`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"type"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 64`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}
64),l(e.span,{style:{color:"#FFAB70"},children:"id"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"})]}}),` 65`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"amount"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"number"})]}}),` 66`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"status"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"pending"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"processing"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"success"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"failed"'})]}}),` 67`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"email"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"})]}}),` 68`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}}),` 69`,l(e.span,{"data-line":"",children:" "}),` 70`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"ColumnDef"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:">[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 71`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 72`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"select"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 73`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 74`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}}),` 75`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"checked"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{props.table."}),l(e.span,{style:{color:"#B392F0"},children:"getIsAllPageRowsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 76`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"indeterminate"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{props.table."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSomePageRowsSelected"}),l(e.span,{style:{color:"#E1E4E8"}
76,children:"()}"})]}}),` 77`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.table."}),l(e.span,{style:{color:"#B392F0"},children:"toggleAllPageRowsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#F97583"},children:"!!"}),l(e.span,{style:{color:"#E1E4E8"},children:"value)}"})]}}),` 78`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"aria-label"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"Select all"'})]}}),` 79`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" />"})}}),` 80`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ),"})}}),` 81`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 82`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}}),` 83`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"checked"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{props.row."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 84`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.row."}),l(e.span,{style:{color:"#B392F0"},children:"toggleSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#F97583"},children:"!!"}),l(e.span,{style:{color:"#E1E4E8"},children:"value)}"})]}}),` 85`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"aria-label"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"Select row"'})]}}),` 86`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" />"})}}),` 87`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ),"})}}),` 88`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" enableSorting: "}),l(e.span,{style:{color:"#79B8FF"},children:"false"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 89`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" enableHiding: "}),l(e.span,{style:{color:"#79B8FF"},children:"false"})]}}),` 90`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 91`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 92`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"status"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 93`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" header: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"Status"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 94`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}
94),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"capitalize"'}),l(e.span,{style:{color:"#E1E4E8"},children:">{props.row."}),l(e.span,{style:{color:"#B392F0"},children:"getValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"status"'}),l(e.span,{style:{color:"#E1E4E8"},children:")}</"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 95`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 96`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 97`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 98`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 99`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 100`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"})]}}),` 101`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}}),` 102`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.column."}),l(e.span,{style:{color:"#B392F0"},children:"toggleSorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"(props.column."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSorted"}),l(e.span,{style:{color:"#E1E4E8"},children:"() "}),l(e.span,{style:{color:"#F97583"},children:"==="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"asc"'}),l(e.span,{style:{color:"#E1E4E8"},children:")}"})]}}),` 103`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 104`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Email"})}}),` 105`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"IconSelector"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 106`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 107`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 108`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 109`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}
109),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"lowercase"'}),l(e.span,{style:{color:"#E1E4E8"},children:">{props.row."}),l(e.span,{style:{color:"#B392F0"},children:"getValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:")}</"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 110`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 111`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 112`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"amount"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 113`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:": () "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"text-right"'}),l(e.span,{style:{color:"#E1E4E8"},children:">Amount</"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">,"})]}}),` 114`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 115`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"formatted"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" () "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 116`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"amount"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"parseFloat"}),l(e.span,{style:{color:"#E1E4E8"},children:"(props.row."}),l(e.span,{style:{color:"#B392F0"},children:"getValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"amount"'}),l(e.span,{style:{color:"#E1E4E8"},children:"))"})]}}),` 117`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"new"}),l(e.span,{style:{color:"#E1E4E8"},children:" Intl."}),l(e.span,{style:{color:"#B392F0"},children:"NumberFormat"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"en-US"'}),l(e.span,{style:{color:"#E1E4E8"},children:", {"})]}}),` 118`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" style: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"currency"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 119`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" currency: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"USD"'})]}}),` 120`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" })."}),l(e.span,{style:{color:"#B392F0"},children:"format"}),l(e.span,{style:{color:"#E1E4E8"},children:"(amount)"})]}}),` 121`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 122`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"text-right font-medium"'}),l(e.span,{style:{color:"#E1E4E8"},children:">{"}),l(e.span,{style:{color:"#B392F0"},children:"formatted"}),l(e.span,{style:{color:"#E1E4E8"}
122,children:"()}</"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 123`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 124`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 125`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 126`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"actions"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 127`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" enableHiding: "}),l(e.span,{style:{color:"#79B8FF"},children:"false"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 128`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 129`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 130`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"placement"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"bottom-end"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 131`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"as"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{Button"}),l(e.span,{style:{color:"#F97583"},children:"<"}),l(e.span,{style:{color:"#9ECBFF"},children:'"button"'}),l(e.span,{style:{color:"#F97583"},children:">"}),l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"size-8 p-0"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 132`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"span"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"sr-only"'}),l(e.span,{style:{color:"#E1E4E8"},children:">Open menu</"}),l(e.span,{style:{color:"#85E89D"},children:"span"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 133`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"IconDots"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 134`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 135`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 136`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuLabel"}),l(e.span,{style:{color:"#E1E4E8"},children:">Actions</"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuLabel"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 137`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),l(e.span,{style:{color:"#B392F0"},children:"writeText"}),l(e.span,{style:{color:"#E1E4E8"},children:"(props.row.original.id)}>"})]}}),` 138`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Copy payment ID"})}}),` 139`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 140`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuSeparator"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 141`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">View customer</"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 142`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">View payment details</"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 143`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 144`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 145`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 146`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 147`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 148`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}}),` 149`,l(e.span,{"data-line":"",children:" "}),` 150`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableDemo"}),l(e.span,{style:{color:"#E1E4E8"}
150,children:"() {"})]}}),` 151`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setSorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"SortingState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 152`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setColumnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"ColumnFiltersState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 153`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setColumnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"VisibilityState"}),l(e.span,{style:{color:"#E1E4E8"},children:">({})"})]}}),` 154`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"rowSelection"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setRowSelection"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"({})"})]}}),` 155`,l(e.span,{"data-line":"",children:" "}),` 156`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#6A737D"},children:"/*"})]}}),` 157`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#6A737D"},children:"get data() {"})}}),` 158`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#6A737D"},children:" return props.data"})}}),` 159`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#6A737D"},children:" },"})}}),` 160`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#6A737D"},children:" get columns() {"})}}),` 161`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#6A737D"},children:" return props.columns"})}}),` 162`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#6A737D"},children:" },"})}}),` 163`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#6A737D"},children:"*/"})}}),` 164`,l(e.span,{"data-line":"",children:" "}),` 165`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSolidTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 166`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" data,"})}}),` 167`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" columns,"})}}),` 168`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"}
168,children:"(),"})]}}),` 169`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getPaginationRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 170`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getSortedRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 171`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getFilteredRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 172`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onSortingChange: setSorting,"})}}),` 173`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onColumnFiltersChange: setColumnFilters,"})}}),` 174`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onColumnVisibilityChange: setColumnVisibility,"})}}),` 175`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onRowSelectionChange: setRowSelection,"})}}),` 176`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" state: {"})}}),` 177`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 178`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 179`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 180`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 181`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 182`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 183`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 184`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 185`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 186`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"rowSelection"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 187`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"rowSelection"}),l(e.span,{style:{color:"#E1E4E8"}
187,children:"()"})]}}),` 188`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 189`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 190`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 191`,l(e.span,{"data-line":"",children:" "}),` 192`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 193`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"w-full"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 194`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center py-4"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 195`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TextField"})]}}),` 196`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"value"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{(table."}),l(e.span,{style:{color:"#B392F0"},children:"getColumn"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:")?."}),l(e.span,{style:{color:"#B392F0"},children:"getFilterValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"() "}),l(e.span,{style:{color:"#F97583"},children:"as"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"??"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'""'}),l(e.span,{style:{color:"#E1E4E8"},children:"}"})]}}),` 197`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"getColumn"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:")?."}),l(e.span,{style:{color:"#B392F0"},children:"setFilterValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"(value)}"})]}}),` 198`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 199`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TextFieldInput"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"placeholder"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"Filter emails..."'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"max-w-sm"'}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 200`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TextField"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 201`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"placement"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"bottom-end"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 202`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"as"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{Button"}),l(e.span,{style:{color:"#F97583"},children:"<"}),l(e.span,{style:{color:"#9ECBFF"},children:'"button"'}),l(e.span,{style:{color:"#F97583"},children:">"}),l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"outline"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"ml-auto"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 203`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" Columns <"}),l(e.span,{style:{color:"#79B8FF"},children:"IconChevronDown"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 204`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 205`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 206`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{table."}),l(e.span,{style:{color:"#B392F0"},children:"getAllColumns"}),l(e.span,{style:{color:"#E1E4E8"}
206,children:"()."}),l(e.span,{style:{color:"#B392F0"},children:"filter"}),l(e.span,{style:{color:"#E1E4E8"},children:"(("}),l(e.span,{style:{color:"#FFAB70"},children:"column"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" column."}),l(e.span,{style:{color:"#B392F0"},children:"getCanHide"}),l(e.span,{style:{color:"#E1E4E8"},children:"())}>"})]}}),` 207`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"column"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 208`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 209`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuCheckboxItem"})]}}),` 210`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"capitalize"'})]}}),` 211`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"checked"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{column."}),l(e.span,{style:{color:"#B392F0"},children:"getIsVisible"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 212`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" column."}),l(e.span,{style:{color:"#B392F0"},children:"toggleVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#F97583"},children:"!!"}),l(e.span,{style:{color:"#E1E4E8"},children:"value)}"})]}}),` 213`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 214`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {column.id}"})}}),` 215`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuCheckboxItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 216`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 217`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }}"})}}),` 218`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 219`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 220`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 221`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 222`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"rounded-md border"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 223`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 224`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHeader"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 225`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{table."}),l(e.span,{style:{color:"#B392F0"},children:"getHeaderGroups"}),l(e.span,{style:{color:"#E1E4E8"}
225,children:"()}>"})]}}),` 226`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"headerGroup"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 227`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 228`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{headerGroup.headers}>"})]}}),` 229`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 230`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 231`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHead"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 232`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {header.isPlaceholder"})}}),` 233`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"?"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"null"})]}}),` 234`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"flexRender"}),l(e.span,{style:{color:"#E1E4E8"},children:"(header.column.columnDef.header, header."}),l(e.span,{style:{color:"#B392F0"},children:"getContext"}),l(e.span,{style:{color:"#E1E4E8"},children:"())}"})]}}),` 235`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHead"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 236`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 237`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }}"})}}),` 238`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 239`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 240`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )}"})}}),` 241`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 242`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHeader"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 243`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableBody"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 244`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {table."}),l(e.span,{style:{color:"#B392F0"},children:"getRowModel"}),l(e.span,{style:{color:"#E1E4E8"}
244,children:"().rows?."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"?"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 245`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"getRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"().rows."}),l(e.span,{style:{color:"#B392F0"},children:"map"}),l(e.span,{style:{color:"#E1E4E8"},children:"(("}),l(e.span,{style:{color:"#FFAB70"},children:"row"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 246`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data-state"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{row."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"() "}),l(e.span,{style:{color:"#F97583"},children:"&&"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"selected"'}),l(e.span,{style:{color:"#E1E4E8"},children:"}>"})]}}),` 247`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{row."}),l(e.span,{style:{color:"#B392F0"},children:"getVisibleCells"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}>"})]}}),` 248`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 249`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 250`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {"}),l(e.span,{style:{color:"#B392F0"},children:"flexRender"}),l(e.span,{style:{color:"#E1E4E8"},children:"(cell.column.columnDef.cell, cell."}),l(e.span,{style:{color:"#B392F0"},children:"getContext"}),l(e.span,{style:{color:"#E1E4E8"},children:"())}"})]}}),` 251`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 252`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )}"})}}),` 253`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 254`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 255`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ))"})}}),` 256`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" ) "}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 257`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 258`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"colSpan"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{columns."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"h-24 text-center"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 259`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" No results."})}}),` 260`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 261`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 262`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )}"})}}),` 263`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableBody"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 264`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 265`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 266`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center justify-end space-x-2 py-4"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 267`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"flex-1 text-sm text-muted-foreground"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 268`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {table."}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredSelectedRowModel"}),l(e.span,{style:{color:"#E1E4E8"}
268,children:"().rows."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:"} of{"}),l(e.span,{style:{color:"#9ECBFF"},children:'" "'}),l(e.span,{style:{color:"#E1E4E8"},children:"}"})]}}),` 269`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {table."}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"().rows."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:"} row(s) selected."})]}}),` 270`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 271`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"space-x-2"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 272`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"})]}}),` 273`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"outline"'})]}}),` 274`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"size"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"sm"'})]}}),` 275`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"previousPage"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 276`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"disabled"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{"}),l(e.span,{style:{color:"#F97583"},children:"!"}),l(e.span,{style:{color:"#E1E4E8"},children:"table."}),l(e.span,{style:{color:"#B392F0"},children:"getCanPreviousPage"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 277`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 278`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Previous"})}}),` 279`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 280`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"})]}}),` 281`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"outline"'})]}}),` 282`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"size"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"sm"'})]}}),` 283`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"nextPage"}),l(e.span,{style:{color:"#E1E4E8"}
283,children:"()}"})]}}),` 284`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"disabled"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{"}),l(e.span,{style:{color:"#F97583"},children:"!"}),l(e.span,{style:{color:"#E1E4E8"},children:"table."}),l(e.span,{style:{color:"#B392F0"},children:"getCanNextPage"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 285`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 286`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Next"})}}),` 287`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 288`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 289`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 290`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 291`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 292`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})}})}}),` 293`,l(e.h2,{id:"introduction",children:"Introduction"}),` 294`,l(e.p,{children:"Every data table or datagrid I've created has been unique. They all behave differently, have specific sorting and filtering requirements, and work with different data sources."}),` 295`,l(e.p,{get children(){return["It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that ",l(e.a,{href:"https://tanstack.com/table/v8/docs/introduction#what-is-headless-ui",children:"headless UI"})," provides."]}}),` 296`,l(e.p,{children:"So instead of a data-table component, I thought it would be more helpful to provide a guide on how to build your own."}),` 297`,l(e.p,{get children(){return["We'll start with the basic ",l(e.code,{children:"<Table />"})," component and build a complex data table from scratch."]}}),` 298`,l(t,{class:"mt-4",get children(){return l(e.p,{get children(){return[l(e.strong,{children:"Tip:"})," If you find yourself using the same table in multiple places in your app, you can always extract it into a reusable component."]}})}}),` 299`,l(e.h2,{id:"table-of-contents",children:"Table of Contents"}),` 300`,l(e.p,{get children(){return["This guide will show you how to use ",l(e.a,{href:"https://tanstack.com/table",children:"TanStack Table"})," and the ",l(e.code,{children:"<Table />"})," component to build your own custom data table. We'll cover the following topics:"]}}),` 301`,l(e.ul,{get children(){return[` 302`,l(e.li,{get children(){return l(e.a,{href:"#basic-table",children:"Basic Table"})}}),` 303`,l(e.li,{get children(){return l(e.a,{href:"#row-actions",children:"Row Actions"})}}),` 304`,l(e.li,{get children(){return l(e.a,{href:"#pagination",children:"Pagination"})}}),` 305`,l(e.li,{get children(){return l(e.a,{href:"#sorting",children:"Sorting"})}}),` 306`,l(e.li,{get children(){return l(e.a,{href:"#filtering",children:"Filtering"})}}),` 307`,l(e.li,{get children(){return l(e.a,{href:"#visibility",children:"Visibility"})}}),` 308`,l(e.li,{get children(){return l(e.a,{href:"#row-selection",children:"Row Selection"})}}),` 309`,l(e.li,{get children(){return l(e.a,{href:"#reusable-components",children:"Reusable Components"})}}),` 310`]}}),` 311`,l(e.h2,{id:"installation",children:"Installation"}),` 312`,l(e.ol,{get children(){return[` 313`,l(e.li,{get children(){return["Add the ",l(e.code,{children:"<Table />"})," component to your project:"]}}),` 314`]}}),` 315`,l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",get children(){return l(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},get children(){return l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#B392F0"},children:"npx"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:"solidui-cli@latest"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:"add"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:"table"})]}})}})}})}}),` 316`,l(e.ol,{start:"2",get children(){return[` 317`,l(e.li,{get children(){return["Add ",l(e.code,{children:"tanstack/solid-table"})," dependency:"]}}),` 318`]}}),` 319`,l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",get children(){return l(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},get children(){return l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#B392F0"},children:"npm"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:"install"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:"@tanstack/solid-table"})]}})}})}})}}),` 320`,l(e.h2,{id:"prerequisites",children:"Prerequisites"}),` 321`,l(e.p,{children:"We are going to build a table to show recent payments. Here's what our data looks like:"}),` 322`,l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"type"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 323`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}
323),l(e.span,{style:{color:"#FFAB70"},children:"id"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"})]}}),` 324`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"amount"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"number"})]}}),` 325`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"status"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"pending"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"processing"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"success"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"failed"'})]}}),` 326`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"email"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"})]}}),` 327`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}}),` 328`,l(e.span,{"data-line":"",children:" "}),` 329`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"payments"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:"[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 330`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 331`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"728ed52f"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 332`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"100"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 333`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"pending"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 334`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 335`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 336`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 337`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"489e1d42"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 338`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"125"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 339`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"processing"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 340`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 341`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 342`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#6A737D"},children:"// ..."})]}}),` 343`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}})]}})}})}}),` 344`,l(e.h2,{id:"project-structure",children:"Project Structure"}),` 345`,l(e.p,{children:"Start by creating the following file structure:"}),` 346`,l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"txt","data-theme":"default",get children(){return l(e.code,{"data-language":"txt","data-theme":"default",style:{display:"grid"},get children(){return[l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#e1e4e8"},children:"src"})}}),` 347`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#e1e4e8"},children:"└── routes"})}}),` 348`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#e1e4e8"},children:" └── payments"})}}),` 349`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#e1e4e8"},children:" ├── columns.tsx"})}}),` 350`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#e1e4e8"},children:" ├── data-table.tsx"})}}),` 351`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#e1e4e8"},children:" └── index.tsx"})}})]}})}})}}),` 352`,l(e.ul,{get children(){return[` 353`,l(e.li,{get children(){return[l(e.code,{children:"columns.tsx"}
353)," will contain our column definitions."]}}),` 354`,l(e.li,{get children(){return[l(e.code,{children:"data-table.tsx"})," will contain our ",l(e.code,{children:"<DataTable />"})," component."]}}),` 355`,l(e.li,{get children(){return[l(e.code,{children:"index.tsx"})," is where we'll fetch data and render our table."]}}),` 356`]}}),` 357`,l(e.h2,{id:"basic-table",children:"Basic Table"}),` 358`,l(e.p,{children:"Let's start by building a basic table."}),` 359`,l(n,{get children(){return[l(e.h3,{id:"column-definitions",children:"Column Definitions"}),l(e.p,{children:"First, we'll define our columns."}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"columns.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { ColumnDef } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 360`,l(e.span,{"data-line":"",children:" "}),` 361`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"type"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 362`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"id"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"})]}}),` 363`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"amount"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"number"})]}}),` 364`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"status"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"pending"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"processing"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"success"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"|"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"failed"'})]}}),` 365`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"email"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"})]}}),` 366`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}}),` 367`,l(e.span,{"data-line":"",children:" "}),` 368`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"ColumnDef"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:">[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 369`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 370`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"status"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 371`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" header: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"Status"'})]}}),` 372`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 373`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 374`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 375`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" header: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"Email"'})]}}),` 376`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 377`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 378`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"amount"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 379`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" header: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"Amount"'})]}}),` 380`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 381`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}})]}})}})]}}),l(t,{class:"mt-4",get children(){return l(e.p,{get children(){return[l(e.strong,{children:"Note:"}),` Columns are where you define the core of what your table 382will look like. They define the data that will be displayed, how it will be 383formatted, sorted and filtered.`]}})}}),l(e.h3,{id:"datatable--component",get children(){return[l(e.code,{children:"<DataTable />"})," component"]}}),l(e.p,{get children(){return["Next, we'll create a ",l(e.code,{children:"<DataTable />"})," component to render our table."]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"data-table.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { For, Show } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"solid-js"'})]}}),` 384`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"}
384,children:" { ColumnDef, createSolidTable, flexRender, getCoreRowModel } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 385`,l(e.span,{"data-line":"",children:" "}),` 386`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 387`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Table,"})}}),` 388`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" TableBody,"})}}),` 389`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" TableCell,"})}}),` 390`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" TableHead,"})}}),` 391`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" TableHeader,"})}}),` 392`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" TableRow"})}}),` 393`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/table"'})]}}),` 394`,l(e.span,{"data-line":"",children:" "}),` 395`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"interface"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"> {"})]}}),` 396`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"ColumnDef"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">[]"})]}}),` 397`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#FFAB70"},children:"data"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:"[]"})]}}),` 398`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}}),` 399`,l(e.span,{"data-line":"",children:" "}),` 400`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}}),` 401`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSolidTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 402`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"}
402,children:"() {"})]}}),` 403`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.data"})]}}),` 404`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 405`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 406`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.columns"})]}}),` 407`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 408`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 409`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 410`,l(e.span,{"data-line":"",children:" "}),` 411`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 412`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"rounded-md border"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 413`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 414`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHeader"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 415`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{table."}),l(e.span,{style:{color:"#B392F0"},children:"getHeaderGroups"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}>"})]}}),` 416`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"headerGroup"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 417`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 418`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{headerGroup.headers}>"})]}}),` 419`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 420`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHead"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"colSpan"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{header.colSpan}>"})]}}),` 421`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Show"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"when"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{"}),l(e.span,{style:{color:"#F97583"},children:"!"}),l(e.span,{style:{color:"#E1E4E8"},children:"header.isPlaceholder}>"})]}}),` 422`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {"}),l(e.span,{style:{color:"#B392F0"},children:"flexRender"}),l(e.span,{style:{color:"#E1E4E8"},children:"(header.column.columnDef.header, header."}),l(e.span,{style:{color:"#B392F0"},children:"getContext"}),l(e.span,{style:{color:"#E1E4E8"}
422,children:"())}"})]}}),` 423`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Show"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 424`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHead"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 425`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )}"})}}),` 426`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 427`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 428`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )}"})}}),` 429`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 430`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableHeader"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 431`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableBody"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 432`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Show"})]}}),` 433`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"when"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{table."}),l(e.span,{style:{color:"#B392F0"},children:"getRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"().rows?."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:"}"})]}}),` 434`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"fallback"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{"})]}}),` 435`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 436`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"colSpan"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{props.columns."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"h-24 text-center"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 437`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" No results."})}}),` 438`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 439`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 440`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 441`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 442`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{table."}),l(e.span,{style:{color:"#B392F0"},children:"getRowModel"}),l(e.span,{style:{color:"#E1E4E8"}
442,children:"().rows}>"})]}}),` 443`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"row"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 444`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data-state"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{row."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"() "}),l(e.span,{style:{color:"#F97583"},children:"&&"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"selected"'}),l(e.span,{style:{color:"#E1E4E8"},children:"}>"})]}}),` 445`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{row."}),l(e.span,{style:{color:"#B392F0"},children:"getVisibleCells"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}>"})]}}),` 446`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 447`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 448`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {"}),l(e.span,{style:{color:"#B392F0"},children:"flexRender"}),l(e.span,{style:{color:"#E1E4E8"},children:"(cell.column.columnDef.cell, cell."}),l(e.span,{style:{color:"#B392F0"},children:"getContext"}),l(e.span,{style:{color:"#E1E4E8"},children:"())}"})]}}),` 449`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableCell"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 450`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )}"})}}),` 451`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 452`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableRow"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 453`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )}"})}}),` 454`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 455`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Show"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 456`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TableBody"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 457`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 458`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 459`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 460`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}}),l(t,{get children(){return[l(e.p,{get children(){return[l(e.strong,{children:"Tip"}),": If you find yourself using ",l(e.code,{children:"<DataTable />"})," in multiple places, this is the component you could make reusable by extracting it to ",l(e.code,{children:"components/ui/data-table.tsx"}),"."]}}),l(e.p,{get children(){return l(e.code,{children:"<DataTable columns={columns} data={data} />"})}})]}}),l(e.h3,{id:"render-the-table",children:"Render the table"}),l(e.p,{children:"Finally, we'll render our table in our page component."}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"index.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { createAsync, query } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@solidjs/router"'})]}}),` 461`,l(e.span,{"data-line":"",children:" "}),` 462`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { columns, Payment } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"./columns"'})]}}),` 463`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { DataTable } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"./data-table"'})]}}),` 464`,l(e.span,{"data-line":"",children:" "}),` 465`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"getData"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"query"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#F97583"},children:"async"}),l(e.span,{style:{color:"#E1E4E8"},children:" () "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 466`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"use server"'})]}}),` 467`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#6A737D"},children:"// Fetch data from your api"})]}}),` 468`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 469`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 470`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"728ed52f"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 471`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" amount: "}),l(e.span,{style:{color:"#79B8FF"},children:"100"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 472`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" status: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"pending"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 473`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" email: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"[email protected]"'})]}}),` 474`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 475`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#6A737D"},children:"// ..."})]}}),` 476`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ]"})}}),` 477`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"}, "}),l(e.span,{style:{color:"#9ECBFF"},children:'"getData"'}),l(e.span,{style:{color:"#E1E4E8"},children:")"})]}}),` 478`,l(e.span,{"data-line":"",children:" "}),` 479`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"default"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"async"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DemoPage"}),l(e.span,{style:{color:"#E1E4E8"}
479,children:"() {"})]}}),` 480`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createAsync"}),l(e.span,{style:{color:"#E1E4E8"},children:"(() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"getData"}),l(e.span,{style:{color:"#E1E4E8"},children:"())"})]}}),` 481`,l(e.span,{"data-line":"",children:" "}),` 482`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 483`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"container mx-auto py-10"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 484`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{columns} "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{"}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"},children:"()} />"})]}}),` 485`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 486`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 487`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}})]}}),` 488`,l(e.h2,{id:"cell-formatting",children:"Cell Formatting"}),` 489`,l(e.p,{children:"Let's format the amount cell to display the dollar amount. We'll also align the cell to the right."}),` 490`,l(n,{get children(){return[l(e.h3,{id:"update-columns-definition",children:"Update columns definition"}),l(e.p,{get children(){return["Update the ",l(e.code,{children:"header"})," and ",l(e.code,{children:"cell"})," definitions for amount as follows:"]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"columns.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"ColumnDef"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:">[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 491`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 492`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"amount"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 493`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:": () "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"text-right"'}),l(e.span,{style:{color:"#E1E4E8"},children:">Amount</"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">,"})]}}),` 494`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}
494),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 495`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"formatted"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createMemo"}),l(e.span,{style:{color:"#E1E4E8"},children:"(() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 496`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"amount"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"parseFloat"}),l(e.span,{style:{color:"#E1E4E8"},children:"(props.row."}),l(e.span,{style:{color:"#B392F0"},children:"getValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"amount"'}),l(e.span,{style:{color:"#E1E4E8"},children:"))"})]}}),` 497`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"new"}),l(e.span,{style:{color:"#E1E4E8"},children:" Intl."}),l(e.span,{style:{color:"#B392F0"},children:"NumberFormat"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"en-US"'}),l(e.span,{style:{color:"#E1E4E8"},children:", {"})]}}),` 498`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" style: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"currency"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 499`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" currency: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"USD"'})]}}),` 500`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" })."}),l(e.span,{style:{color:"#B392F0"},children:"format"}),l(e.span,{style:{color:"#E1E4E8"},children:"(amount)"})]}}),` 501`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 502`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"text-right font-medium"'}),l(e.span,{style:{color:"#E1E4E8"},children:">{"}),l(e.span,{style:{color:"#B392F0"},children:"formatted"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}</"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 503`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 504`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 505`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}})]}})}})]}}),l(e.p,{children:"You can use the same approach to format other cells and headers."})]}}),` 506`,l(e.h2,{id:"row-actions",children:"Row Actions"}),` 507`,l(e.p,{get children(){return["Let's add row actions to our table. We'll use a ",l(e.code,{children:"<Dropdown />"})," component for this."]}}),` 508`,l(n,{get children(){return[l(e.h3,{id:"update-columns-definition-1",children:"Update columns definition"}),l(e.p,{get children(){return["Update our columns definition to add a new ",l(e.code,{children:"actions"})," column. The ",l(e.code,{children:"actions"})," cell returns a ",l(e.code,{children:"<Dropdown />"})," component."]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"columns.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"}
508,children:" { ColumnDef } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 509`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { MoreHorizontal } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"lucide-solid"'})]}}),` 510`,l(e.span,{"data-line":"",children:" "}),` 511`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/button"'})]}}),` 512`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 513`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenu,"})}}),` 514`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuContent,"})}}),` 515`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuItem,"})}}),` 516`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuLabel,"})}}),` 517`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuSeparator,"})}}),` 518`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuTrigger"})}}),` 519`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/dropdown-menu"'})]}}),` 520`,l(e.span,{"data-line":"",children:" "}),` 521`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"ColumnDef"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:">[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 522`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#6A737D"},children:"// ..."})]}}),` 523`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 524`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"actions"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 525`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" enableHiding: "}),l(e.span,{style:{color:"#79B8FF"},children:"false"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 526`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}
526),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 527`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 528`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"placement"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"bottom-end"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 529`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"as"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{Button"}),l(e.span,{style:{color:"#F97583"},children:"<"}),l(e.span,{style:{color:"#9ECBFF"},children:'"button"'}),l(e.span,{style:{color:"#F97583"},children:">"}),l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"size-8 p-0"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 530`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"span"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"sr-only"'}),l(e.span,{style:{color:"#E1E4E8"},children:">Open menu</"}),l(e.span,{style:{color:"#85E89D"},children:"span"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 531`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"IconDots"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 532`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 533`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 534`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuLabel"}),l(e.span,{style:{color:"#E1E4E8"},children:">Actions</"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuLabel"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 535`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" navigator.clipboard."}),l(e.span,{style:{color:"#B392F0"},children:"writeText"}),l(e.span,{style:{color:"#E1E4E8"},children:"(props.row.original.id)}>"})]}}),` 536`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Copy payment ID"})}}),` 537`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 538`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuSeparator"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 539`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">View customer</"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 540`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">View payment details</"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 541`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 542`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 543`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 544`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 545`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 546`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#6A737D"},children:"// ..."})]}}),` 547`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}})]}})}})]}}),l(e.p,{get children(){return["You can access the row data using ",l(e.code,{children:"row.original"})," in the ",l(e.code,{children:"cell"})," function. Use this to handle actions for your row eg. use the ",l(e.code,{children:"id"})," to make a DELETE call to your API."]}})]}}),` 548`,l(e.h2,{id:"pagination",children:"Pagination"}),` 549`,l(e.p,{children:"Next, we'll add pagination to our table."}),` 550`,l(n,{get children(){return[l(e.h3,{id:"update-datatable",get children(){return["Update ",l(e.code,{children:"<DataTable>"})]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"data-table.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 551`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ColumnDef,"})}}),` 552`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" createSolidTable,"})}}),` 553`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" flexRender,"})}}),` 554`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel,"})}}),` 555`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel"})}}),` 556`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 557`,l(e.span,{"data-line":"",children:" "}),` 558`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">("}
558),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}}),` 559`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSolidTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 560`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 561`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.data"})]}}),` 562`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 563`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 564`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.columns"})]}}),` 565`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 566`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 567`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getPaginationRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 568`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 569`,l(e.span,{"data-line":"",children:" "}),` 570`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#6A737D"},children:"// ..."})]}}),` 571`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}}),l(e.p,{get children(){return["This will automatically paginate your rows into pages of 10. See the ",l(e.a,{href:"https://tanstack.com/table/v8/docs/api/features/pagination",children:"pagination docs"})," for more information on customizing page size and implementing manual pagination."]}}),l(e.h3,{id:"add-pagination-controls",children:"Add pagination controls"}),l(e.p,{get children(){return["We can add pagination controls to our table using the ",l(e.code,{children:"<Button />"})," component and the ",l(e.code,{children:"table.previousPage()"}),", ",l(e.code,{children:"table.nextPage()"})," API methods."]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"data-table.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/button"'})]}}),` 572`,l(e.span,{"data-line":"",children:" "}),` 573`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">("}
573),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}}),` 574`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSolidTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 575`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 576`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.data"})]}}),` 577`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 578`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 579`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.columns"})]}}),` 580`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 581`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 582`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getPaginationRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 583`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 584`,l(e.span,{"data-line":"",children:" "}),` 585`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 586`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 587`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"rounded-md border"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 588`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 589`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" { "}),l(e.span,{style:{color:"#6A737D"},children:"// .... }"})]}}),` 590`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"</"}),l(e.span,{style:{color:"#E1E4E8"},children:"Table"}),l(e.span,{style:{color:"#F97583"},children:">"})]}}),` 591`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"</"}),l(e.span,{style:{color:"#E1E4E8"},children:"div"}),l(e.span,{style:{color:"#F97583"},children:">"})]}}),` 592`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center justify-end space-x-2 py-4"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 593`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"})]}}),` 594`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"outline"'})]}}),` 595`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"size"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"sm"'})]}}),` 596`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"previousPage"}),l(e.span,{style:{color:"#E1E4E8"}
596,children:"()}"})]}}),` 597`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"disabled"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{"}),l(e.span,{style:{color:"#F97583"},children:"!"}),l(e.span,{style:{color:"#E1E4E8"},children:"table."}),l(e.span,{style:{color:"#B392F0"},children:"getCanPreviousPage"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 598`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 599`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Previous"})}}),` 600`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 601`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"})]}}),` 602`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"outline"'})]}}),` 603`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"size"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"sm"'})]}}),` 604`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"nextPage"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 605`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"disabled"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{"}),l(e.span,{style:{color:"#F97583"},children:"!"}),l(e.span,{style:{color:"#E1E4E8"},children:"table."}),l(e.span,{style:{color:"#B392F0"},children:"getCanNextPage"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 606`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 607`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Next"})}}),` 608`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 609`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 610`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"</"}),l(e.span,{style:{color:"#E1E4E8"},children:"div"}),l(e.span,{style:{color:"#F97583"},children:">"})]}}),` 611`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 612`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}}),l(e.p,{get children(){return["See ",l(e.a,{href:"#reusable-components",children:"Reusable Components"})," section for a more advanced pagination component."]}})]}}),` 613`,l(e.h2,{id:"sorting",children:"Sorting"}),` 614`,l(e.p,{children:"Let's make the email column sortable."}),` 615`,l(n,{get children(){return[l(e.h3,{id:"update-datatable-1",get children(){return["Update ",l(e.code,{children:"<DataTable>"})]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"data-table.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { createSignal } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"solid-js"'})]}}),` 616`,l(e.span,{"data-line":"",children:" "}),` 617`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 618`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ColumnDef,"})}}),` 619`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" SortingState,"})}}),` 620`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" flexRender,"})}}),` 621`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel,"})}}),` 622`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel,"})}}),` 623`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel,"})}}),` 624`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" useReactTable,"})}}),` 625`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 626`,l(e.span,{"data-line":"",children:" "}),` 627`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">("}
627),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}}),` 628`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setSorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"SortingState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 629`,l(e.span,{"data-line":"",children:" "}),` 630`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSolidTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 631`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 632`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.data"})]}}),` 633`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 634`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 635`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.columns"})]}}),` 636`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 637`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 638`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getPaginationRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 639`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onSortingChange: setSorting,"})}}),` 640`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getSortedRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 641`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" state: {"})}}),` 642`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"}
642,children:"() {"})]}}),` 643`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 644`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 645`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 646`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 647`,l(e.span,{"data-line":"",children:" "}),` 648`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 649`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 650`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"rounded-md border"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 651`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">{ "}),l(e.span,{style:{color:"#F97583"},children:"..."}),l(e.span,{style:{color:"#E1E4E8"},children:" }</"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 652`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 653`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 654`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 655`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}}),l(e.h3,{id:"make-header-cell-sortable",children:"Make header cell sortable"}),l(e.p,{get children(){return["We can now update the ",l(e.code,{children:"email"})," header cell to add sorting controls."]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"columns.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { ColumnDef } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/react-table"'})]}}),` 656`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { ArrowUpDown } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"lucide-solid"'})]}}),` 657`,l(e.span,{"data-line":"",children:" "}),` 658`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"ColumnDef"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:">[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 659`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 660`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" accessorKey: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 661`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}
661),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 662`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 663`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"})]}}),` 664`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"ghost"'})]}}),` 665`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onClick"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{() "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.column."}),l(e.span,{style:{color:"#B392F0"},children:"toggleSorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"(props.column."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSorted"}),l(e.span,{style:{color:"#E1E4E8"},children:"() "}),l(e.span,{style:{color:"#F97583"},children:"==="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"asc"'}),l(e.span,{style:{color:"#E1E4E8"},children:")}"})]}}),` 666`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 667`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" Email"})}}),` 668`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"ArrowUpDown"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"ml-2 h-4 w-4"'}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 669`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"Button"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 670`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 671`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 672`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 673`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}})]}})}})]}}),l(e.p,{children:"This will automatically sort the table (asc and desc) when the user toggles on the header cell."})]}}),` 674`,l(e.h2,{id:"filtering",children:"Filtering"}),` 675`,l(e.p,{children:"Let's add a search input to filter emails in our table."}),` 676`,l(n,{get children(){return[l(e.h3,{id:"update-datatable-2",get children(){return["Update ",l(e.code,{children:"<DataTable>"})]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"data-table.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { createSignal } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"solid-js"'})]}}),` 677`,l(e.span,{"data-line":"",children:" "}),` 678`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 679`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ColumnDef,"})}}),` 680`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ColumnFiltersState,"})}}),` 681`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" SortingState,"})}}),` 682`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" flexRender,"})}}),` 683`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel,"})}}),` 684`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getFilteredRowModel,"})}}),` 685`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel,"})}}),` 686`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel,"})}}),` 687`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" createSolidTable"})}}),` 688`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 689`,l(e.span,{"data-line":"",children:" "}),` 690`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/button"'})]}}),` 691`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { TextField, TextFieldInput } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/text-field"'})]}}),` 692`,l(e.span,{"data-line":"",children:" "}),` 693`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">("}
693),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}}),` 694`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setSorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"SortingState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 695`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setColumnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"ColumnFiltersState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 696`,l(e.span,{"data-line":"",children:" "}),` 697`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSolidTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 698`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 699`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.data"})]}}),` 700`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 701`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 702`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.columns"})]}}),` 703`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 704`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onSortingChange: setSorting,"})}}),` 705`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"}
705,children:"(),"})]}}),` 706`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getPaginationRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 707`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getSortedRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 708`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onColumnFiltersChange: setColumnFilters,"})}}),` 709`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getFilteredRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 710`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" state: {"})}}),` 711`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 712`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 713`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 714`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 715`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 716`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 717`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 718`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 719`,l(e.span,{"data-line":"",children:" "}),` 720`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 721`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 722`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center py-4"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 723`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TextField"})]}}),` 724`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"value"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{(table."}),l(e.span,{style:{color:"#B392F0"},children:"getColumn"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:")?."}),l(e.span,{style:{color:"#B392F0"},children:"getFilterValue"}),l(e.span,{style:{color:"#E1E4E8"}
724,children:"() "}),l(e.span,{style:{color:"#F97583"},children:"as"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"??"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'""'}),l(e.span,{style:{color:"#E1E4E8"},children:"}"})]}}),` 725`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"getColumn"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:")?."}),l(e.span,{style:{color:"#B392F0"},children:"setFilterValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"(value)}"})]}}),` 726`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 727`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TextFieldInput"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"placeholder"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"Filter emails..."'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"max-w-sm"'}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 728`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TextField"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 729`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 730`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"rounded-md border"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 731`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">{ "}),l(e.span,{style:{color:"#F97583"},children:"..."}),l(e.span,{style:{color:"#E1E4E8"},children:" }</"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 732`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 733`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 734`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 735`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}}),l(e.p,{get children(){return["Filtering is now enabled for the ",l(e.code,{children:"email"})," column. You can add filters to other columns as well. See the ",l(e.a,{href:"https://tanstack.com/table/v8/docs/guide/filters",children:"filtering docs"})," for more information on customizing filters."]}})]}}),` 736`,l(e.h2,{id:"visibility",children:"Visibility"}),` 737`,l(e.p,{get children(){return["Adding column visibility is fairly simple using ",l(e.code,{children:"@tanstack/solid-table"})," visibility API."]}}),` 738`,l(n,{get children(){return[l(e.h3,{id:"update-datatable-3",get children(){return["Update ",l(e.code,{children:"<DataTable>"})]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"data-table.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { createSignal } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"solid-js"'})]}}),` 739`,l(e.span,{"data-line":"",children:" "}),` 740`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 741`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ColumnDef,"})}}),` 742`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ColumnFiltersState,"})}}),` 743`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" SortingState,"})}}),` 744`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" VisibilityState,"})}}),` 745`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" flexRender,"})}}),` 746`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel,"})}}),` 747`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getFilteredRowModel,"})}}),` 748`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel,"})}}),` 749`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel,"})}}),` 750`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" createSolidTable,"})}}),` 751`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 752`,l(e.span,{"data-line":"",children:" "}),` 753`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/button"'})]}}),` 754`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 755`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenu,"})}}),` 756`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuCheckboxItem,"})}}),` 757`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuContent,"})}}),` 758`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" DropdownMenuTrigger,"})}}),` 759`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/dropdown-menu"'})]}}),` 760`,l(e.span,{"data-line":"",children:" "}),` 761`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">("}
761),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}}),` 762`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setSorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"SortingState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 763`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setColumnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"ColumnFiltersState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 764`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setColumnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"VisibilityState"}),l(e.span,{style:{color:"#E1E4E8"},children:">({})"})]}}),` 765`,l(e.span,{"data-line":"",children:" "}),` 766`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSolidTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 767`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 768`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.data"})]}}),` 769`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 770`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#E1E4E8"}
770,children:"() {"})]}}),` 771`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.columns"})]}}),` 772`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 773`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onSortingChange: setSorting,"})}}),` 774`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onColumnFiltersChange: setColumnFilters,"})}}),` 775`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 776`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getPaginationRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 777`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getSortedRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 778`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getFilteredRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 779`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onColumnVisibilityChange: setColumnVisibility,"})}}),` 780`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" state: {"})}}),` 781`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 782`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 783`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 784`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 785`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 786`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 787`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 788`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"}
788,children:"()"})]}}),` 789`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 790`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 791`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 792`,l(e.span,{"data-line":"",children:" "}),` 793`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 794`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 795`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center py-4"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 796`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TextField"})]}}),` 797`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"value"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{(table."}),l(e.span,{style:{color:"#B392F0"},children:"getColumn"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:")?."}),l(e.span,{style:{color:"#B392F0"},children:"getFilterValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"() "}),l(e.span,{style:{color:"#F97583"},children:"as"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"string"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"??"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'""'}),l(e.span,{style:{color:"#E1E4E8"},children:"}"})]}}),` 798`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" table."}),l(e.span,{style:{color:"#B392F0"},children:"getColumn"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),l(e.span,{style:{color:"#E1E4E8"},children:")?."}),l(e.span,{style:{color:"#B392F0"},children:"setFilterValue"}),l(e.span,{style:{color:"#E1E4E8"},children:"(value)}"})]}}),` 799`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 800`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"TextFieldInput"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"placeholder"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"Filter emails..."'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"max-w-sm"'}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 801`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"TextField"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 802`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"placement"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"bottom-end"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 803`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"as"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{Button"}),l(e.span,{style:{color:"#F97583"},children:"<"}),l(e.span,{style:{color:"#9ECBFF"},children:'"button"'}),l(e.span,{style:{color:"#F97583"},children:">"}),l(e.span,{style:{color:"#E1E4E8"},children:"} "}),l(e.span,{style:{color:"#B392F0"},children:"variant"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"outline"'}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"ml-auto"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 804`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" Columns <"}),l(e.span,{style:{color:"#79B8FF"},children:"IconChevronDown"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 805`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuTrigger"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 806`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 807`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"each"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{table."}),l(e.span,{style:{color:"#B392F0"},children:"getAllColumns"}),l(e.span,{style:{color:"#E1E4E8"}
807,children:"()."}),l(e.span,{style:{color:"#B392F0"},children:"filter"}),l(e.span,{style:{color:"#E1E4E8"},children:"(("}),l(e.span,{style:{color:"#FFAB70"},children:"column"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" column."}),l(e.span,{style:{color:"#B392F0"},children:"getCanHide"}),l(e.span,{style:{color:"#E1E4E8"},children:"())}>"})]}}),` 808`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {("}),l(e.span,{style:{color:"#FFAB70"},children:"column"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" {"})]}}),` 809`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 810`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuCheckboxItem"})]}}),` 811`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"capitalize"'})]}}),` 812`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"checked"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{column."}),l(e.span,{style:{color:"#B392F0"},children:"getIsVisible"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 813`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" column."}),l(e.span,{style:{color:"#B392F0"},children:"toggleVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#F97583"},children:"!!"}),l(e.span,{style:{color:"#E1E4E8"},children:"value)}"})]}}),` 814`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" >"})}}),` 815`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {column.id}"})}}),` 816`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuCheckboxItem"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 817`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 818`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }}"})}}),` 819`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"For"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 820`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenuContent"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 821`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#79B8FF"},children:"DropdownMenu"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 822`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 823`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"rounded-md border"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 824`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">{ "}),l(e.span,{style:{color:"#F97583"},children:"..."}),l(e.span,{style:{color:"#E1E4E8"},children:" }</"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 825`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 826`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 827`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 828`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}}),l(e.p,{children:"This adds a dropdown menu that you can use to toggle column visibility."})]}}),` 829`,l(e.h2,{id:"row-selection",children:"Row Selection"}),` 830`,l(e.p,{children:"Next, we're going to add row selection to our table."}),` 831`,l(n,{get children(){return[l(e.h3,{id:"update-column-definitions",children:"Update column definitions"}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"columns.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"}
831,children:" { ColumnDef } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"@tanstack/solid-table"'})]}}),` 832`,l(e.span,{"data-line":"",children:" "}),` 833`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/badge"'})]}}),` 834`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"import"}),l(e.span,{style:{color:"#E1E4E8"},children:" { Checkbox } "}),l(e.span,{style:{color:"#F97583"},children:"from"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#9ECBFF"},children:'"~/components/ui/checkbox"'})]}}),` 835`,l(e.span,{"data-line":"",children:" "}),` 836`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"columns"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"ColumnDef"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"Payment"}),l(e.span,{style:{color:"#E1E4E8"},children:">[] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" ["})]}}),` 837`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" {"})}}),` 838`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" id: "}),l(e.span,{style:{color:"#9ECBFF"},children:'"select"'}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 839`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"header"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 840`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}}),` 841`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"checked"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{props.table."}),l(e.span,{style:{color:"#B392F0"},children:"getIsAllPageRowsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 842`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"indeterminate"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{props.table."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSomePageRowsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 843`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.table."}),l(e.span,{style:{color:"#B392F0"},children:"toggleAllPageRowsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#F97583"},children:"!!"}),l(e.span,{style:{color:"#E1E4E8"},children:"value)}"})]}}),` 844`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"aria-label"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"Select all"'})]}}),` 845`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" />"})}}),` 846`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ),"})}}),` 847`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"cell"}),l(e.span,{style:{color:"#E1E4E8"},children:": ("}
847),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 848`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}}),` 849`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"checked"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{props.row."}),l(e.span,{style:{color:"#B392F0"},children:"getIsSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"()}"})]}}),` 850`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"onChange"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:"{("}),l(e.span,{style:{color:"#FFAB70"},children:"value"}),l(e.span,{style:{color:"#E1E4E8"},children:") "}),l(e.span,{style:{color:"#F97583"},children:"=>"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.row."}),l(e.span,{style:{color:"#B392F0"},children:"toggleSelected"}),l(e.span,{style:{color:"#E1E4E8"},children:"("}),l(e.span,{style:{color:"#F97583"},children:"!!"}),l(e.span,{style:{color:"#E1E4E8"},children:"value)}"})]}}),` 851`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"aria-label"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"Select row"'})]}}),` 852`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" />"})}}),` 853`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" ),"})}}),` 854`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" enableSorting: "}),l(e.span,{style:{color:"#79B8FF"},children:"false"}),l(e.span,{style:{color:"#E1E4E8"},children:","})]}}),` 855`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" enableHiding: "}),l(e.span,{style:{color:"#79B8FF"},children:"false"})]}}),` 856`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 857`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"]"})}})]}})}})]}}),l(e.h3,{id:"update-datatable-4",get children(){return["Update ",l(e.code,{children:"<DataTable>"})]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return[l(e.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"data-table.tsx"}),l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#F97583"},children:"export"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"function"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">("}),l(e.span,{style:{color:"#FFAB70"},children:"props"}),l(e.span,{style:{color:"#F97583"},children:":"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"DataTableProps"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"TData"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#B392F0"},children:"TValue"}),l(e.span,{style:{color:"#E1E4E8"},children:">) {"})]}}),` 858`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setSorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"SortingState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 859`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setColumnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"ColumnFiltersState"}),l(e.span,{style:{color:"#E1E4E8"},children:">([])"})]}}),` 860`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setColumnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#B392F0"},children:"VisibilityState"}),l(e.span,{style:{color:"#E1E4E8"},children:">({})"})]}}),` 861`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" ["}),l(e.span,{style:{color:"#79B8FF"},children:"rowSelection"}),l(e.span,{style:{color:"#E1E4E8"},children:", "}),l(e.span,{style:{color:"#79B8FF"},children:"setRowSelection"}),l(e.span,{style:{color:"#E1E4E8"},children:"] "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"createSignal"}),l(e.span,{style:{color:"#E1E4E8"},children:"({})"})]}}),` 862`,l(e.span,{"data-line":"",children:" "}),` 863`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"const"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#79B8FF"},children:"table"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"useReactTable"}),l(e.span,{style:{color:"#E1E4E8"},children:"({"})]}}),` 864`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"data"}),l(e.span,{style:{color:"#E1E4E8"}
864,children:"() {"})]}}),` 865`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.data"})]}}),` 866`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 867`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columns"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 868`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" props.columns"})]}}),` 869`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 870`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onSortingChange: setSorting,"})}}),` 871`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onColumnFiltersChange: setColumnFilters,"})}}),` 872`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getCoreRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getCoreRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 873`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getPaginationRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getPaginationRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 874`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getSortedRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getSortedRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 875`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" getFilteredRowModel: "}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"(),"})]}}),` 876`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onColumnVisibilityChange: setColumnVisibility,"})}}),` 877`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" onRowSelectionChange: setRowSelection,"})}}),` 878`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" state: {"})}}),` 879`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 880`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"sorting"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 881`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 882`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 883`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnFilters"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 884`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 885`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"}
885,children:"() {"})]}}),` 886`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"columnVisibility"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 887`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" },"})}}),` 888`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"get"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"rowSelection"}),l(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}}),` 889`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"rowSelection"}),l(e.span,{style:{color:"#E1E4E8"},children:"()"})]}}),` 890`,l(e.span,{"data-line":"","data-highlighted-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 891`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" }"})}}),` 892`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" })"})}}),` 893`,l(e.span,{"data-line":"",children:" "}),` 894`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#F97583"},children:"return"}),l(e.span,{style:{color:"#E1E4E8"},children:" ("})]}}),` 895`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 896`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"rounded-md border"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 897`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" <"}),l(e.span,{style:{color:"#79B8FF"},children:"Table"}),l(e.span,{style:{color:"#E1E4E8"},children:" />"})]}}),` 898`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 899`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" </"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 900`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" )"})}}),` 901`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:"}"})}})]}})}})]}}),l(e.p,{children:"This adds a checkbox to each row and a checkbox in the header to select all rows."}),l(e.h3,{id:"show-selected-rows",children:"Show selected rows"}),l(e.p,{get children(){return["You can show the number of selected rows using the ",l(e.code,{children:"table.getFilteredSelectedRowModel()"})," API."]}}),l(e.div,{"data-rehype-pretty-code-fragment":"",get children(){return l(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",get children(){return l(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},get children(){return[l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"<"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:" "}),l(e.span,{style:{color:"#B392F0"},children:"class"}),l(e.span,{style:{color:"#F97583"},children:"="}),l(e.span,{style:{color:"#9ECBFF"},children:'"flex-1 text-sm text-muted-foreground"'}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}}),` 902`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:" {table."}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredSelectedRowModel"}),l(e.span,{style:{color:"#E1E4E8"}
902,children:"().rows."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:"} of {table."}),l(e.span,{style:{color:"#B392F0"},children:"getFilteredRowModel"}),l(e.span,{style:{color:"#E1E4E8"},children:"().rows."}),l(e.span,{style:{color:"#79B8FF"},children:"length"}),l(e.span,{style:{color:"#E1E4E8"},children:"}{"}),l(e.span,{style:{color:"#9ECBFF"},children:'" "'}),l(e.span,{style:{color:"#E1E4E8"},children:"}"})]}}),` 903`,l(e.span,{"data-line":"",get children(){return l(e.span,{style:{color:"#E1E4E8"},children:" row(s) selected."})}}),` 904`,l(e.span,{"data-line":"",get children(){return[l(e.span,{style:{color:"#E1E4E8"},children:"</"}),l(e.span,{style:{color:"#85E89D"},children:"div"}),l(e.span,{style:{color:"#E1E4E8"},children:">"})]}})]}})}})}})]}}),` 905`,l(e.h2,{id:"reusable-components",children:"Reusable Components"}),` 906`,l(e.p,{get children(){return["Check out the ",l(e.a,{href:"/examples/tasks",children:"Tasks"})," example to learn about creating reusable components for your data tables."]}})]}function p(r={}){const{wrapper:e}=Object.assign({},i(),r.components);return e?l(e,d(r,{get children(){return l(a,r)}})):a(r)}function s(r,e){throw new Error("Expected component `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}export{p as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.