https://paragon-openedx.netlify.app/component---src-templates-comp…le-tablefilters-mdx-bef85bbec47a0bb568a0.js

1"use strict";(self.webpackChunkparagon_pattern_library_documentation=self.webpackChunkparagon_pattern_library_documentation||[]).push([[8146],{6697:function(e,n,t){t.d(n,{Am:function(){return a.A}});t(48515),t(70207);var a=t(51876);t(55517)},33465:function(e,n,t){t.r(n),t.d(n,{default:function(){return k}});var a=t(43023),l=t(63696);function o(e){const n=Object.assign({p:"p",code:"code",h2:"h2",a:"a",span:"span",pre:"pre"},(0,a.RP)(),e.components);return l.createElement(l.Fragment,null,l.createElement(n.p,null,"The ",l.createElement(n.code,null,"DataTable")," component is a wrapper that uses the ",l.createElement("a",{href:"https://github.com/TanStack/table/tree/v7/docs/src/pages/docs",target:"_blank",rel:"noopener noreferrer"},"react-table")," library to\ncreate tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control."),"\n",l.createElement(n.h2,{id:"filtering-and-sorting"},"Filtering and sorting",l.createElement(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#filtering-and-sorting"},l.createElement(n.span,{className:"pgn-doc__anchor"},"#"))),"\n",l.createElement(n.p,null,"Paragon currently provides a variety of filter types, and you can also define your own filter types."),"\n",l.createElement(n.p,null,"In the example below, a default ",l.createElement(n.code,null,"TextFilter")," component is used as the default filter for all columns. A default filter can be passed in,\nor a filter component can be defined on the column using the ",l.createElement(n.code,null,"Filter")," attribute. See ",l.createElement("a",{href:"https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md",target:"_blank",rel:"noopener noreferrer"},"react-table filters documentation"),"\nfor more information."),"\n",l.createElement(n.h2,{id:"available-filter-functions"},"Available filter functions",l.createElement(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#available-filter-functions"},l.createElement(n.span,{className:"pgn-doc__anchor"},"#"))),"\n",l.createElement(n.p,null,"A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see ",l.createElement("a",{href:"https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md#column-options",target:"_blank",rel:"noopener noreferrer"},"react-table filters documentation"),"\nfor more information.\nFilter functions are defined on the column as the ",l.createElement(n.code,null,"filter")," attribute."),"\n",l.createElement("dl",null,l.createElement("dt",null,"text"),l.createElement("dd",null,"This is the default filter function. It lower-cases the search string and checks if the row value includes the search string"),l.createElement("dt",null,"exactText"),l.createElement("dd",null,"Checks that the row value matches the search string exactly (case-insensitive)"),l.createElement("dt",null,"exactTextCase"),l.createElement("dd",null,"Checks that the row value matches the search string exactly (case-sensitive)"),l.createElement("dt",null,"includes"),l.createElement("dd",null,"Check that the row value includes the search string"),l.createElement("dt",null,"includesAll"),l.createElement("dd",null,"Check that the row value includes every item in the array"),l.createElement("dt",null,"includesSome"),l.createElement("dd",null,"Check that row value includes some item in the array"),l.createElement("dt",null,"includesValue"),l.createElement("dd",null,"Check that the filter value includes the value of the row"),l.createElement("dt",null,"exact"),l.createElement("dd",null,"Checks for exact equality between the row value and the search term. ",l.createElement("pre",null,"===")),l.createElement("dt",null,"equals"),l.createElement("dd",null,"Checks for equality between the row value and the search term. ",l.createElement("pre",null,"==")),l.createElement("dt",null,"between"),l.createElement("dd",null,"Expects an array with a min and max value as the search term. Checks that the row value is between the min and max")),"\n",l.createElement(n.h2,{id:"using-filter-components-with-filter-functions"},"Using Filter components with filter functions",l.createElement(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#using-filter-components-with-filter-functions"},l.createElement(n.span,{className:"pgn-doc__anchor"},"#"))),"\n",l.createElement(n.p,null,"The ",l.createElement(n.code,null,"MultiSelectDropdownFilter")," and ",l.createElement(n.code,null,"CheckboxFilter")," components expect an array of values. It is best to use them with the ",l.createElement(n.code,null,"includesValue")," filter function.\nThe ",l.createElement(n.code,null,"TextFilter")," and ",l.createElement(n.code,null,"DropdownFilter")," components can be used with a variety of the above ",l.createElement(n.code,null,"filter")," functions."),"\n",l.createElement(n.h2,{id:"textfilter-multiselectdropdownfilter-checkboxfilter"},"TextFilter, MultiSelectDropdownFilter, CheckboxFilter",l.createElement(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#textfilter-multiselectdropdownfilter-checkboxfilter"},l.createElement(n.span,{className:"pgn-doc__anchor"},"#"))),"\n",l.createElement(n.p,null,"The checkbox filter is used in the dropdown.\nA CheckboxFilter is used on the coat color column. Filters can be defined on the columns themselves.\nThe ",l.createElement(n.code,null,"CheckboxFilter"),", ",l.createElement(n.code,null,"DropdownFilter"),", and ",l.createElement(n.code,null,"MultiSelectDropdownFilter")," additionally require that the ",l.createElement(n.code,null,"filterChoices")," property be defined on the column."),"\n",l.createElement(n.p,null,"The number of filters dis

1played in the ",l.createElement(n.code,null,"TableControlBar")," can be modified by passing the ",l.createElement(n.code,null,"numBreakoutFilters")," prop. When the screen size is small,\nall filters will be rendered in the dropdown."),"\n",l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx",live:!0},"<DataTable\n  isFilterable\n  defaultColumnValues={{ Filter: TextFilter }}\n  numBreakoutFilters={2}\n  columns={[\n    {\n      Header: 'Name',\n      accessor: 'name',\n\n    },\n    {\n      Header: 'Age',\n      accessor: 'age',\n      Filter: MultiSelectDropdownFilter,\n      filter: 'includesValue',\n      filterChoices: [\n        {\n          name: 'Four',\n          value: 4,\n        },\n        {\n          name: 'One',\n          value: 1,\n        },\n        {\n          name: 'Twelve',\n          value: 12,\n        },\n        {\n          name: 'Nine',\n          value: 9,\n        },\n        {\n          name: 'Seventeen',\n          number: 17,\n          value: 17,\n        },\n      ]\n    },\n    {\n      Header: 'Famous For',\n      accessor: 'famous_for',\n    },\n    {\n      Header: 'Coat Color',\n      accessor: 'color',\n      Filter: CheckboxFilter,\n      filter: 'includesValue',\n      filterChoices: [{\n        name: 'Russian white',\n        number: 1,\n        value: 'russian white',\n      },\n      {\n        name: 'Orange Tabby',\n        number: 2,\n        value: 'orange tabby',\n      },\n      {\n        name: 'Brown Tabby',\n        number: 3,\n        value: 'brown tabby',\n      },\n      {\n        name: 'Siamese',\n        number: 1,\n        value: 'siamese',\n      }]\n    },\n  ]}\n  itemCount={7}\n  data={[\n    {\n      name: 'Lil Bub',\n      color: 'brown tabby',\n      famous_for: 'weird tongue',\n      age: 4,\n    },\n    {\n      name: 'Grumpy Cat',\n      color: 'siamese',\n      famous_for: 'serving moods',\n      age: 4,\n    },\n    {\n      name: 'Smoothie',\n      color: 'orange tabby',\n      famous_for: 'modeling',\n      age: 1,\n    },\n    {\n      name: 'Maru',\n      color: 'brown tabby',\n      famous_for: 'being a lovable oaf',\n      age: 12,\n    },\n    {\n      name: 'Keyboard Cat',\n      color: 'orange tabby',\n      famous_for: 'piano virtuoso',\n      age: 9,\n    },\n    {\n      name: 'Long Cat',\n      color: 'russian white',\n      famous_for:\n        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',\n      age: 9,\n    },\n    {\n      name: 'Zeno',\n      color: 'brown tabby',\n      famous_for: 'getting halfway there',\n      age: 17,\n    },\n  ]}\n\n/>\n")),"\n",l.createElement(n.h2,{id:"dropdownfilter"},"DropdownFilter",l.createElement(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#dropdownfilter"},l.createElement(n.span,{className:"pgn-doc__anchor"},"#"))),"\n",l.createElement(n.pre,null,l.createElement(n.code,{className:"language-jsx",live:!0},"<DataTable\n  isFilterable\n  defaultColumnValues={{ Filter: TextFilter }}\n  numBreakoutFilters={2}\n  columns={[\n    {\n      Header: 'Name',\n      accessor: 'name',\n\n    },\n    {\n      Header: 'Age',\n      accessor: 'age',\n      Filter: DropdownFilter,\n      filter: 'equals',\n      filterChoices: [\n        {\n          name: 'Four',\n          value: 4,\n        },\n        {\n          name: 'One',\n          value: 1,\n        },\n        {\n          name: 'Twelve',\n          value: 12,\n        },\n        {\n          name: 'Nine',\n          value: 9,\n        },\n        {\n          name: 'Seventeen',\n          number: 17,\n          value: 17,\n        },\n      ]\n    },\n    {\n      Header: 'Famous For',\n      accessor: 'famous_for',\n    },\n    {\n      Header: 'Coat Color',\n      accessor: 'color',\n      Filter: CheckboxFilter,\n      filter: 'includesValue',\n      filterChoices: [{\n        name: 'Russian white',\n        number: 1,\n        value: 'russian white',\n      },\n      {\n        name: 'Orange Tabby',\n        number: 2,\n        value: 'orange tabby',\n      },\n      {\n        name: 'Brown Tabby',\n        number: 3,\n        value: 'brown tabby',\n      },\n      {\n        name: 'Siamese',\n        number: 1,\n        value: 'siamese',\n      }]\n    },\n  ]}\n  itemCount={7}\n  data={[\n    {\n      name: 'Lil Bub',\n      color: 'brown tabby',\n      famous_for: 'weird tongue',\n      age: 4,\n    },\n    {\n      name: 'Grumpy Cat',\n      color: 'siamese',\n      famous_for: 'serving moods',\n      age: 4,\n    }

1,\n    {\n      name: 'Smoothie',\n      color: 'orange tabby',\n      famous_for: 'modeling',\n      age: 1,\n    },\n    {\n      name: 'Maru',\n      color: 'brown tabby',\n      famous_for: 'being a lovable oaf',\n      age: 12,\n    },\n    {\n      name: 'Keyboard Cat',\n      color: 'orange tabby',\n      famous_for: 'piano virtuoso',\n      age: 9,\n    },\n    {\n      name: 'Long Cat',\n      color: 'russian white',\n      famous_for:\n        'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',\n      age: 9,\n    },\n    {\n      name: 'Zeno',\n      color: 'brown tabby',\n      famous_for: 'getting halfway there',\n      age: 17,\n    },\n  ]}\n\n/>\n")))}var r=function(e={}){const{wrapper:n}=Object.assign({},(0,a.RP)(),e.components);return n?l.createElement(n,e,l.createElement(o,e)):o(e)},c=t(69215),i=t(4452),s=t.n(i),m=t(89715),u=t(70420),d=t(85091),h=t(40481),b=t(90731),f=t(68147),p=t(29845),g=t(11399),E=t(53704),v=t(43268),w=t(72042),y=t(38442),C=t(22757),_=t(77663),x=t(48521);const F={h2:e=>l.createElement(w.A,Object.assign({h:"2"},e)),h3:e=>l.createElement(w.A,Object.assign({h:"3"},e)),h4:e=>l.createElement(w.A,Object.assign({h:"4"},e)),h5:e=>l.createElement(w.A,Object.assign({h:"5"},e)),h6:e=>l.createElement(w.A,Object.assign({h:"6"},e)),pre:e=>l.createElement("div",e),code:p.A,Link:c.Link};function A({data:{mdx:e,components:n},pageContext:{cssVariablesData:t,componentsUsageInsights:o,githubEditPath:r},children:c}){var i,p,w,A;const k=(0,m.Ub)({maxWidth:u.A.large.maxWidth}),{0:T,1:N}=(0,l.useState)(!1),{settings:S}=(0,l.useContext)(f.SettingsContext),O=n.nodes.reduce((e,n)=>(e[n.displayName]=n,e),{}),V="Theme Variables",I="theme-variables",D="Props API",j="props-api",H="Usage Insights",P="usage-insights",B=(null===(i=e.frontmatter)||void 0===i?void 0:i.components)||[],M=o.map(e=>e.replace(/\./g,"")),L=B.some(e=>M.includes(e)),$=(null===(p=e.frontmatter)||void 0===p||null===(w=p.status)||void 0===w?void 0:w.toLowerCase().includes("deprecate"))||!1;return(0,l.useEffect)(()=>N(!!k),[k]),l.createElement(E.A,{showMinimizedTitle:T,isMdx:!0,tocData:(()=>{var n,a;const l=JSON.parse(JSON.stringify(e.tableOfContents));var o,r;null==t||!t.length||null!==(n=l.items)&&void 0!==n&&n.includes()||(null===(o=l.items)||void 0===o||o.push({title:V,url:`#${I}`}));(null===(a=l.items)||void 0===a||a.push({title:D,url:`#${j}`}),L)&&(null===(r=l.items)||void 0===r||r.push({title:H,url:`#${P}`}));return l})(),githubEditPath:r},l.createElement(v.A,{title:e.frontmatter.title}),l.createElement(d.A,{size:S.containerWidth,className:"py-5"},$&&l.createElement(h.A,{variant:"warning"},l.createElement(h.A.Heading,null,"This component will be removed soon."),l.createElement("p",{className:"small mb-0"},e.frontmatter.notes)),l.createElement(b.A,{className:s()("justify-content-between",{"flex-column-reverse align-items-start":k}),direction:"horizontal"},l.createElement("h1",null,e.frontmatter.title),l.createElement(b.A,{className:s()("mb-2",{"justify-content-end":k}),direction:"horizontal",gap:2},l.createElement(_.A,{githubEditPath:r}),l.createElement(C.A,null))),l.createElement(a.xA,{components:F},c),!(null==t||!t.length)&&l.createElement("div",{className:"mb-5"},l.createElement("h2",{className:"mb-4 pgn-doc__heading",id:I},V,l.createElement("a",{href:`#${I}`,"aria-label":"Jump to CSS variables"},l.createElement("span",{className:"pgn-doc__anchor"},"#"))),l.createElement(x.A,{rawStylesheet:t})),(null===(A=O[B[0]])||void 0===A?void 0:A.props)&&l.createElement("h2",{className:"mb-5 pgn-doc__heading",id:j},D,l.createElement("a",{href:`#${j}`,"aria-label":"Props API"},l.createElement("span",{className:"pgn-doc__anchor"},"#"))),"string"!=typeof B&&(null==B?void 0:B.map(e=>{const n=O[e];return n?l.createElement(g.A,Object.assign({key:n.displayName},n)):null})),L&&l.createElement(l.Fragment,null,l.createElement("h2",{className:"pgn-doc__heading m-0",id:P},H,l.createElement("a",{href:`#${P}`,"aria-label":"Usage Insights"},l.createElement("span",{className:"pgn-doc__anchor"},"#"))),l.createElement(y.A,{data:B}))))}function k(e){return l.createElement(A,e,l.createElement(r,e))}},48521:function(e,n,t){var a=t(63696),l=t(33049),o=t(93636),r=t(6697);const c=Array(5).fill({variableName:a.createElement(l.A,null),computedValue:a.createElement(l.A,null)});n.A=function({rawStylesheet:e}){const{0:n,1:t}=(0,a.useState)(c),l=(0,r.Am)();return(0,a.useEffect)(()=>{setTimeout(()=>{const n=getComputedStyle(document.body),l=e.filter(e=>e.match(/var\((\w|-|_)*\)/g)).map(e=>{const t=e.trim(),l=t.match(/(?<=var?\()(.*)(?=\))/g),o=l?n.getPropertyValue(l[0]):"";return{variableName:a.createElement("code",null,t),computedValue:a.createElement("code",null,o)}});t(l)},1e3)},[e,l.name]),a.createElement(o.A,{data:n,itemCount:n.length,columns:[{Header:"CSS Variable",accessor:"variableName"},{Header:"Computed Value",accessor:"computedValue"}]},a.createElement(o.A.Table,null))}}}]);
2//# sourceMappingURL=component---src-templates-component-page-template-tsx-content-file-path-src-data-table-tablefilters-mdx-bef85bbec47a0bb568a0.js.map