1"use strict";(self.webpackChunk_material_table_website=self.webpackChunk_material_table_website||[]).push([["9037"],{44323(e,n,t){t.r(n),t.d(n,{metadata:()=>i,default:()=>m,frontMatter:()=>a,contentTitle:()=>d,toc:()=>c,assets:()=>o});var i=JSON.parse('{"id":"filter/basic","title":"Basic Filtering","description":"Props","source":"@site/demos/filter/basic.mdx","sourceDirName":"filter","slug":"/filter/basic","permalink":"/demos/filter/basic","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"basic","title":"Basic Filtering","hide_title":true},"sidebar":"sidebar","previous":{"title":"Custom Row Export","permalink":"/demos/export/custom"},"next":{"title":"Custom Column Filter","permalink":"/demos/filter/custom-filter"}}'),r=t(74848),l=t(28453),s=t(84252);let a={id:"basic",title:"Basic Filtering",hide_title:!0},d="Basic Filter",o={},c=[{value:"Props",id:"props",level:2},{value:"Usage",id:"usage",level:2},{value:"Live Demo",id:"live-demo",level:2}];function h(e){let n={code:"code",h1:"h1",h2:"h2",header:"header",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"basic-filter",children:"Basic Filter"})}),"\n",(0,r.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Field"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"options.filtering"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsx)(n.td,{children:"display filter row on table"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"column.filtering"})}),(0,r.jsx)(n.td,{children:"boolean"}),(0,r.jsxs)(n.td,{children:["set as ",(0,r.jsx)(n.code,{children:"false"})," to hide default filter to display on a column"]})]})]})]}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",children:'import MaterialTable from "@material-table/core";\n\n<MaterialTable\n // ...\n options={{\n filtering: true,\n }}\n columns={[\n {\n title: "Name",\n field: "name",\n filtering: false,\n },\n {\n title: "Surname",\n field: "surname",\n },\n {\n title: "Birth Year",\n field: "birthYear",\n type: "numeric",\n },\n {\n title: "Birth Place",\n field: "birthCity",\n lookup: {\n 34: "\u0130stanbul",\n 63: "\u015Eanl\u0131urfa",\n },\n },\n ]}\n/>;\n'})}),"\n",(0,r.jsx)(n.h2,{id:"live-demo",children:"Live Demo"}),"\n",(0,r.jsx)(s.mN,{}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-jsx",metastring:"live",live:!0,children:'function BasicFilter() {\n return (\n <MaterialTable\n data={[\n {\n name: "Mehmet",\n surname: "Baran",\n birthYear: 1987,\n birthCity: 63,\n },\n {\n name: "Zerya Bet\xfcl",\n surname: "Baran",\n birthYear: 2017,\n birthCity: 34,\n },\n ]}\n columns={[\n {\n title: "Name",\n field: "name",\n /**\n * Hide filter on specific column\n */\n filtering: false,\n },\n {\n title: "Surname",\n field: "surname",\n },\n {\n title: "Birth Year",\n field: "birthYear",\n type: "numeric",\n },\n {\n title: "Birth Place",\n field: "birthCity",\n lookup: {\n 34: "\u0130stanbul",\n 63: "\u015Eanl\u0131urfa",\n },\n },\n ]}\n options={{\n filtering: true,\n }}\n />\n );\n}\n'})})]})}function m(e={}){let{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},84252(e,n,t){t.d(n,{mN:()=>a});var i=t(74848);t(96540),t(10898);var r=t(44003),l=t(385);let s=({type:e,children:n})=>{let t=e;return"tip"===e&&(t="success"),"note"===e&&(t="secondary"),(0,i.jsx)(r.A,{theme:(0,l.A)(),children:(0,i.jsxs)("div",{className:`admonition admonition-${e} alert alert--${t}`,children:[(0,i.jsx)("div",{className:"admonition-heading",children:(0,i.jsxs)("h5",{children:[(0,i.jsx)("span",{className:"admonition-icon",children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16",children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})})}),e.toLowerCase()]})}),(0,i.jsx)("div",{className:"admonition-content",children:(0,i.jsx)("p",{children:n})})]})})},a=()=>(0,i.jsxs)(s,{type:"note",children:["See"," ",(0,i.jsx)("a",{href:"/demos/#demo-environment",children:(0,i.jsx)("b",{children:(0,i.jsx)("i",{children:"here"})})})," ","for more on the ",(0,i.jsx)("code",{children:"GLOBAL_VARS"})," we use in our demos"]})},28453(e,n,t){t.d(n,{R:()=>s,x:()=>a});var i=t(96540);let r={},l=i.createContext(r);function s(e){let n=i.useContext(l);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]);
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.