1"use strict";(self.webpackChunk_material_table_website=self.webpackChunk_material_table_website||[]).push([["2950"],{82980(e,n,t){t.r(n),t.d(n,{metadata:()=>o,default:()=>u,frontMatter:()=>r,contentTitle:()=>c,toc:()=>d,assets:()=>l});var o=JSON.parse('{"id":"actions/basic","title":"Basic Action","description":"You can add buttons to rows or toolbar by using actions prop. Actions prop takes array of actions.","source":"@site/demos/actions/basic.mdx","sourceDirName":"actions","slug":"/actions/basic","permalink":"/demos/actions/basic","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"basic","title":"Basic Action"},"sidebar":"sidebar","previous":{"title":"Introduction","permalink":"/demos/"},"next":{"title":"Toolbar","permalink":"/demos/override/toolbar"}}'),i=t(74848),s=t(28453),a=t(84252);let r={id:"basic",title:"Basic Action"},c,l={},d=[{value:"Usage",id:"usage",level:2},{value:"Live Demo",id:"live-demo",level:2},{value:"Action Rows",id:"action-rows",level:3},{value:"Free Actions",id:"free-actions",level:3}];function m(e){let n={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"You can add buttons to rows or toolbar by using actions prop. Actions prop takes array of actions."}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:'import MaterialTable from "@material-table/core";\n\n<MaterialTable\n // ...\n actions={[\n {\n icon: () => <SaveIcon />,\n tooltip: "Save User",\n onClick: (event, rowData) => {\n const rowJson = JSON.stringify(rowData, null, 2);\n alert(`Do save operation : ${rowJson}`);\n },\n },\n ]}\n/>;\n'})}),"\n",(0,i.jsx)(n.h2,{id:"live-demo",children:"Live Demo"}),"\n",(0,i.jsx)(a.mN,{}),"\n",(0,i.jsx)(n.h3,{id:"action-rows",children:"Action Rows"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:"live",live:!0,children:'function BasicActionsDemo() {\n return (\n <MaterialTable\n data={DEMO_DATA}\n columns={DEMO_COLS}\n actions={[\n {\n icon: () => <SaveIcon />,\n tooltip: "Save User",\n onClick: (event, rowData) => {\n const rowJson = JSON.stringify(rowData, null, 2);\n alert(`Do save operation : ${rowJson}`);\n },\n },\n ]}\n />\n );\n}\n'})}),"\n",(0,i.jsx)(n.h3,{id:"free-actions",children:"Free Actions"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",metastring:"live",live:!0,children:'function BasicActionsDemo() {\n return (\n <MaterialTable\n data={DEMO_DATA}\n columns={DEMO_COLS}\n actions={[\n {\n icon: () => <SaveIcon />,\n tooltip: "Save User",\n isFreeAction: true,\n onClick: (event) => {\n alert(`Icon clicked`);\n },\n },\n ]}\n />\n );\n}\n'})})]})}function u(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}},84252(e,n,t){t.d(n,{mN:()=>r});var o=t(74848);t(96540),t(10898);var i=t(44003),s=t(385);let a=({type:e,children:n})=>{let t=e;return"tip"===e&&(t="success"),"note"===e&&(t="secondary"),(0,o.jsx)(i.A,{theme:(0,s.A)(),children:(0,o.jsxs)("div",{className:`admonition admonition-${e} alert alert--${t}`,children:[(0,o.jsx)("div",{className:"admonition-heading",children:(0,o.jsxs)("h5",{children:[(0,o.jsx)("span",{className:"admonition-icon",children:(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16",children:(0,o.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,o.jsx)("div",{className:"admonition-content",children:(0,o.jsx)("p",{children:n})})]})})},r=()=>(0,o.jsxs)(a,{type:"note",children:["See"," ",(0,o.jsx)("a",{href:"/demos/#demo-environment",children:(0,o.jsx)("b",{children:(0,o.jsx)("i",{children:"here"})})})," ","for more on the ",(0,o.jsx)("code",{children:"GLOBAL_VARS"})," we use in our demos"]})},28453(e,n,t){t.d(n,{R:()=>a,x:()=>r});var o=t(96540);let i={},s=o.createContext(i);function a(e){let n=o.useContext(s);return o.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(s.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.