1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8996],{11284:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/dump/tanstack-filter-column",function(){return s(6261)}])},6261:function(e,t,s){"use strict";s.r(t),s.d(t,{default:function(){return u}});var l=s(85893),a=s(67294),r=s(27060),n=s(74094);let i=[{firstName:"tanner",lastName:"linsley",age:24,visits:100,status:"Relationship",progress:50},{firstName:"tandy",lastName:"miller",age:40,visits:40,status:"Single",progress:80},{firstName:"joe",lastName:"dirte",age:45,visits:20,status:"Complicated",progress:10}],o=(0,r.Cl)(),c=[o.accessor("firstName",{cell:e=>e.getValue(),footer:e=>e.column.id}),o.accessor(e=>e.lastName,{id:"lastName",cell:e=>(0,l.jsx)("i",{children:e.getValue()}),header:()=>(0,l.jsx)("span",{children:"Last Name"}),footer:e=>e.column.id,filterFn:function(e,t,s){return e.getValue(t).startsWith(s)}}),o.accessor("age",{header:()=>"Age",cell:e=>e.renderValue(),footer:e=>e.column.id,meta:{className:"alignRight"}}),o.accessor("visits",{header:()=>(0,l.jsx)("span",{children:"Visits"}),footer:e=>e.column.id}),o.accessor("status",{header:"Status",footer:e=>e.column.id}),o.accessor("progress",{header:"Profile Progress",footer:e=>e.column.id})];function u(){let[e,t]=a.useState(()=>[...i]),s=a.useReducer(()=>({}),{})[1],[o,u]=a.useState([]),m=(0,n.b7)({data:e,columns:c,getCoreRowModel:(0,r.sC)(),filterFns:{},state:{columnFilters:o},onColumnFiltersChange:u,getFilteredRowModel:(0,r.vL)()});return(0,l.jsxs)("div",{className:"p-2",children:[(0,l.jsxs)("table",{children:[(0,l.jsx)("thead",{children:m.getHeaderGroups().map(e=>(0,l.jsx)("tr",{children:e.headers.map(e=>(0,l.jsxs)("th",{className:e.column.columnDef.meta?.className,children:[e.isPlaceholder?null:(0,n.ie)(e.column.columnDef.header,e.getContext()),e.column.getCanFilter()?(0,l.jsx)("div",{children:(0,l.jsx)(d,{column:e.column})}):null]},e.id))},e.id))}),(0,l.jsx)("tbody",{children:m.getRowModel().rows.map(e=>(0,l.jsx)("tr",{children:e.getVisibleCells().map(e=>(0,l.jsx)("td",{className:e.column.columnDef.meta?.className,children:(0,n.ie)(e.column.columnDef.cell,e.getContext())},e.id))},e.id))}),(0,l.jsx)("tfoot",{children:m.getFooterGroups().map(e=>(0,l.jsx)("tr",{children:e.headers.map(e=>(0,l.jsx)("th",{children:e.isPlaceholder?null:(0,n.ie)(e.column.columnDef.footer,e.getContext())},e.id))},e.id))})]}),(0,l.jsx)("div",{className:"h-4"}),(0,l.jsx)("button",{onClick:()=>s(),className:"border p-2",children:"Rerender"}),(0,l.jsxs)("div",{children:["Filter by Status: Access setFilterValue() directly:",(0,l.jsx)("br",{}),(0,l.jsx)("input",{placeholder:"Filter by status...",value:m.getColumn("status")?.getFilterValue()??"",onChange:e=>{m.getColumn("status")?.setFilterValue(e.target.value)}})]})]})}function d(e){let{column:t}=e,s=t.getFilterValue(),{filterVariant:a}=t.columnDef.meta??{};return(0,l.jsx)(m,{className:"w-36 border shadow rounded",onChange:e=>t.setFilterValue(e),placeholder:"Search...",type:"text",value:s??""})}function m(e){let{value:t,onChange:s,debounce:r=500,...n}=e,[i,o]=a.useState(t);return a.useEffect(()=>{o(t)},[t]),a.useEffect(()=>{let e=setTimeout(()=>{s(i)},r);return()=>clearTimeout(e)},[i]),(0,l.jsx)("input",{...n,value:i,onChange:e=>o(e.target.value)})}}},function(e){e.O(0,[4094,2888,9774,179],function(){return e(e.s=11284)}),_N_E=e.O()}]);
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.