https://muhimasri.com/component---src-pages-code-examples-validate…eact-table-five-tsx-99f626fdc550324006a1.js

1"use strict";(self.webpackChunkgatsby_starter_blog=self.webpackChunkgatsby_starter_blog||[]).push([[903,50],{3200:function(e,t,n){n.r(t),n.d(t,{columns:function(){return m},default:function(){return f}});var l=n(5785),a=n(7294),o=n(7060),c=n(9759);const d=[{studentId:1111,name:"Bahar Constantia",dateOfBirth:"1984-01-04",major:"Computer Science"},{studentId:2222,name:"Harold Nona",dateOfBirth:"1961-05-10",major:"Communications"},{studentId:3333,name:"Raginolf Arnulf",dateOfBirth:"1991-10-12",major:"Business"},{studentId:4444,name:"Marvyn Wendi",dateOfBirth:"1978-09-24",major:"Psychology"}],i=()=>"undefined"!=typeof document&&document.location.href.includes("One"),u=e=>{let{getValue:t,row:n,column:l,table:o}=e;const c=t(),d=l.columnDef.meta,u=o.options.meta,{0:r,1:s}=(0,a.useState)(c),{0:m,1:f}=(0,a.useState)("");(0,a.useEffect)((()=>{s(c)}),[c]);const h=e=>{p(e),null==u||u.updateData(n.index,l.id,r,e.target.validity.valid)},v=e=>{p(e),s(e.target.value),null==u||u.updateData(n.index,l.id,e.target.value,e.target.validity.valid)},p=e=>{if(null==d||!d.validate||"undefined"!=typeof document&&(document.location.href.includes("One")||document.location.href.includes("Two")||document.location.href.includes("Three")||document.location.href.includes("Four")||document.location.href.includes("Five")))e.target.validity.valid?f(""):f(e.target.validationMessage);else{d.validate(e.target.value)?(e.target.setCustomValidity(""),f("")):(e.target.setCustomValidity(d.validationMessage),f(d.validationMessage))}};var g;return null!=u&&u.editedRows[n.id]?"select"===(null==d?void 0:d.type)?a.createElement("select",{onChange:v,value:c,required:!!i()||(null==d?void 0:d.required),title:m},null==d||null===(g=d.options)||void 0===g?void 0:g.map((e=>""===e.value&&"undefined"!=typeof document&&(document.location.href.includes("One")||document.location.href.includes("Two"))?null:a.createElement("option",{key:e.value,value:e.value},e.label)))):a.createElement("input",{value:r,onChange:e=>s(e.target.value),onBlur:h,type:(null==d?void 0:d.type)||"text",required:!!i()||(null==d?void 0:d.required),pattern:"undefined"!=typeof document&&(document.location.href.includes("One")||document.location.href.includes("Two")||document.location.href.includes("Three"))?null:null==d?void 0:d.pattern,title:"undefined"!=typeof document&&(document.location.href.includes("One")||document.location.href.includes("Two")||document.location.href.includes("Three")||document.location.href.includes("Four"))?"":m}):a.createElement("span",null,r)},r=e=>{let{table:t}=e;const n=t.options.meta,l=t.getSelectedRowModel().rows;return a.createElement("div",{className:"footer-buttons"},l.length>0&&a.createElement("button",{className:"remove-button",onClick:()=>{n.removeSelectedRows(t.getSelectedRowModel().rows.map((e=>e.id))),t.resetRowSelection()}},"Remove Selected x"),a.createElement("button",{className:"add-button",onClick:null==n?void 0:n.addRow},"Add New +"))},s=(0,o.Cl)(),m=[s.accessor("studentId",{header:"Student ID",cell:u,meta:{type:"number"}}),s.accessor("name",{header:"Full Name",cell:u,meta:{type:"text",required:!0,pattern:"^[a-zA-Z ]+$"}}),s.accessor("dateOfBirth",{header:"Date Of Birth",cell:u,meta:{type:"date",required:!0,validate:e=>new Date(e)<=new Date,validationMessage:"Date cannot be in the future"}}),s.accessor("major",{header:"Major",cell:u,meta:{type:"select",options:[{value:"",label:"Select"},{value:"Computer Science",label:"Computer Science"},{value:"Communications",label:"Communications"},{value:"Business",label:"Business"},{value:"Psychology",label:"Psychology"}],required:!0}}),s.display({id:"edit",cell:e=>{var t;let{row:n,table:l}=e;const o=l.options.meta,c=null==o?void 0:o.validRows[n.id],d=!(!c||"undefined"!=typeof document&&(document.location.href.includes("One")||document.location.href.includes("Two")||document.location.href.includes("Three")||document.location.href.includes("Four")||document.location.href.includes("Five")||document.location.href.includes("Six")))&&(null===(t=Object.values(c))||void 0===t?void 0:t.some((e=>!e))),i=e=>{const t=e.currentTarget.name;null==o||o.setEditedRows((e=>({...e,[n.id]:!e[n.id]}))),"edit"!==t&&(null==o||o.revertData(n.index,"cancel"===e.currentTarget.name))};return a.createElement("div",{className:"edit-cell-container"},null!=o&&o.editedRows[n.id]?a.createElement("div",{className:"edit-cell-action"},a.createElement("button",{onClick:i,name:"cancel"},"⚊")," ",a.createElement("button",{onClick:i,name:"done",disabled:d},"✔")):a.createElement("div",{className:"edit-cell-action"},a.createElement("button",{onClick:i,name:"edit"},"✐"),a.createElement("button",{onClick:()=>{null==o||o.removeRow(n.index)},name:"remove"},"X")),a.createElement("input",{type:"checkbox",checked:n.getIsSelected(),onChange:n.getToggleSelectedHandler()}))}})];function f(){"undefined"!=typeof document&&((document.location.href.includes("One")||document.location.href.includes("Two"))&&(d[0].name="",d[0].studentId=""),document.location.href.includes("Three")&&(d[0].major=""),document.location.href.includes("Four")&&(d[0].name="123"));const{0:e,1:t}=(0,a.useState)((()=>[].concat(d))),{0:n,1:i}=(0,a.useState)((()=>[].concat(d))),{0:u,1:s}=(0,a.useState)({0:!0}),{0:f,1:h}=(0,a.useState)({}),v=(0,c.b7)({data:e,columns:m,getCoreRowModel:(0,o.sC)(),enableRowSelection:!0,meta:{editedRows:u,setEditedRows:s,validRows:f,setValidRows:h,revertData:(l,a)=>{a?t((e=>e.map(((e,t)=>t===l?n[l]:e)))):i((t=>t.map(((t,n)=>n===l?e[l]:t))))},updateData:(e,n,l,a)=>{t((t=>t.map(((a,o)=>o===e?{...t[e],[n]:l}:a)))),h((t=>({...t,[e]:{...t[e],[n]:a}})))},addRow:()=>{const e={studentId:Math.floor(1e4*Math.random()),name:"",dateOfBirth:"",major:""},n=t=>[].concat((0,l.Z)(t),[e]);t(n),i(n)},removeRow:e=>{const n=t=>t.filter(((t,n)=>n!==e));t(n),i(n)},removeSelectedRows:e=>{const n=t=>t.filter(((t,n)=>!e.includes(n)));t(n),i(n)}}});return a.createElement("article",{className:"react-table-validation"},a.createElement("table",null,a.createElement("thead",null,v.getHeaderGroups().map((e=>a.createElement("tr",{key:e.id},e.headers.map((e=>a.createElement("th",{key:e.id},e.isPlaceholder?null:(0,c.ie)(e.column.columnDef.header,e.getContext())))))))),a.createElement("tbody",null,v.getRowModel().rows.map((e=>a.createElement("tr",{key:e.id},e.getVisibleCells().map((e=>a.createElement("td",{key:e.id},(0,c.ie)(e.column.columnDef.cell,e.getContext())))))))),a.createElement("tfoot",null,a.createElement("tr",null,a.createElement("th",{colSpan:v.getCenterLeafColumns().length,align:"right"},a.createElement(r,{table:v}))))))}},9559:function(e,t,n){n.r(t),n.d(t,{default:function(){return o}});var l=n(7294),a=n(3200);function o(){return l.createElement(a.default,null)}}}]);

2//# sourceMappingURL=component---src-pages-code-examples-validate-react-table-validate-react-table-five-tsx-99f626fdc550324006a1.js.map