{"id":11112,"date":"2025-01-31T07:00:11","date_gmt":"2025-01-31T04:00:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/"},"modified":"2025-01-31T07:00:11","modified_gmt":"2025-01-31T04:00:11","slug":"react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/","title":{"rendered":"React MUI Data Grid&#8217;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme"},"content":{"rendered":"<p>React MUI Data Grid&#8217;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme<\/p>\n<p>Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data Grid&#8217;de ok tu\u015flar\u0131n\u0131 kullanarak input alanlar\u0131nda gezinmenin pratik bir yolunu ele alaca\u011f\u0131z.  MUI Data Grid, g\u00fc\u00e7l\u00fc \u00f6zellikleriyle bilinse de, varsay\u0131lan olarak ok tu\u015flar\u0131yla h\u00fccreler aras\u0131nda dola\u015f\u0131rken input alanlar\u0131na odaklanmay\u0131 engelliyor. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir.  \u0130\u015fte bu sorunu event.stopPropagation() fonksiyonunu kullanarak nas\u0131l \u00e7\u00f6zebilece\u011fimiz.<\/p>\n<h2>Sorunun Tan\u0131m\u0131 ve \u00c7\u00f6z\u00fcm Yolu<\/h2>\n<p>MUI Data Grid&#8217;de, bir h\u00fccredeki input alan\u0131na odakland\u0131\u011f\u0131n\u0131zda, ok tu\u015flar\u0131yla grid i\u00e7inde gezinmeye devam edersiniz.  Bu, input alanlar\u0131nda kolayca de\u011fer girmeyi zorla\u015ft\u0131r\u0131r.  \u00c7\u00f6z\u00fcm\u00fcm\u00fcz, ok tu\u015flar\u0131n\u0131n input alan\u0131nda kalmas\u0131n\u0131 ve grid i\u00e7inde gezinmeyi engellemek i\u00e7in event.stopPropagation() metodunu kullanmakt\u0131r. Bu metod, olay\u0131n kabarc\u0131klanmas\u0131n\u0131 durdurarak, sadece input alan\u0131ndaki olaylar\u0131 i\u015fler.<\/p>\n<h2>Kod Uygulamas\u0131<\/h2>\n<p>\u0130\u015fte, bu sorunu \u00e7\u00f6zen bir kod \u00f6rne\u011fi: <\/p>\n<pre><code class=\"language-javascript\">\nimport { GridCellParams } from '@mui\/x-data-grid';\n\nconst MyCustomCell = ({ params }: { params: GridCellParams }) => {\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n      event.stopPropagation(); \n    }\n  };\n\n  return (\n    <input\n      type=\"text\"\n      value={params.value}\n      onChange={(e) => params.api.setEditCellValue(params.id, params.field, e.target.value)}\n      onKeyDown={handleKeyDown}\n    \/>\n  );\n};\n\n\/\/ ... di\u011fer kodlar ...\n<\/code><\/pre>\n<p>Bu kodda, MyCustomCell bile\u015feni,  onKeyDown olay dinleyicisiyle ok tu\u015flar\u0131na bas\u0131ld\u0131\u011f\u0131nda event.stopPropagation() fonksiyonunu \u00e7a\u011f\u0131r\u0131r. Bu sayede, ok tu\u015flar\u0131 grid&#8217;i etkilemez ve input alan\u0131nda kal\u0131r.  params.api.setEditCellValue fonksiyonu, h\u00fccre de\u011ferini g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r.  Bu y\u00f6ntemi, istedi\u011finiz t\u00fcm input alanlar\u0131na uygulayarak, t\u00fcm grid&#8217;inizde sorunsuz bir \u015fekilde ok tu\u015flar\u0131yla gezinme sa\u011flayabilirsiniz.<\/p>\n<h2>Ek Bilgiler ve \u0130pu\u00e7lar\u0131<\/h2>\n<p>Bu \u00e7\u00f6z\u00fcm, basit ve etkilidir.  Ancak, daha karma\u015f\u0131k senaryolar i\u00e7in ek \u00f6zellikler eklemeniz gerekebilir. \u00d6rne\u011fin,  tab tu\u015fuyla ge\u00e7i\u015fleri de y\u00f6netmeniz gerekebilir.  Bu durum i\u00e7in,  event.preventDefault() kullanarak varsay\u0131lan tab davran\u0131\u015f\u0131n\u0131 da de\u011fi\u015ftirebilirsiniz.  Ayr\u0131ca,  performans optimizasyonu i\u00e7in, gereksiz event listener&#8217;lar\u0131 kullanmaktan ka\u00e7\u0131nmal\u0131s\u0131n\u0131z.<\/p>\n<p>Daha fazla bilgi i\u00e7in <a href=\"https:\/\/dev.to\/rajeshroyal\/practical-use-of-the-eventstoppropagation-react-mui-data-grid-allowing-arrow-key-navigation-for-571a\" target=\"_blank\" rel=\"noopener noreferrer\">bu kayna\u011fa<\/a> g\u00f6z atabilirsiniz. Kendi React projelerinizde kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in,  kendi web sitemi olan <a href=\"https:\/\/fatihsoysal.com\" target=\"_blank\" rel=\"noopener noreferrer\">fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Umar\u0131m bu makale, React MUI Data Grid&#8217;de ok tu\u015flar\u0131yla input alanlar\u0131nda gezinme sorununu \u00e7\u00f6zmenize yard\u0131mc\u0131 olmu\u015ftur.  event.stopPropagation() fonksiyonunun g\u00fcc\u00fcn\u00fc kullanarak, kullan\u0131c\u0131 deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz.  Herhangi bir sorunuz varsa, l\u00fctfen yorumlarda belirtmekten \u00e7ekinmeyin.<\/p>\n<p>#Etiketler: React, MUI Data Grid, event.stopPropagation, Ok Tu\u015flar\u0131, Input Alanlar\u0131, Gezinme, Kullan\u0131c\u0131 Deneyimi, JavaScript,  React Bile\u015fenleri, Kod \u00d6rne\u011fi, Programlama, Web Geli\u015ftirme<\/p>\n","protected":false},"excerpt":{"rendered":"React MUI Data Grid&#8217;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-11112","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React MUI Data Grid&#039;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data Grid&#039;de ok tu\u015flar\u0131n\u0131 kullanarak input alanlar\u0131nda gezinmenin pratik bir yolunu ele alaca\u011f\u0131z. MUI Data Grid, g\u00fc\u00e7l\u00fc \u00f6zellikleriyle bilinse de, varsay\u0131lan olarak ok tu\u015flar\u0131yla h\u00fccreler aras\u0131nda dola\u015f\u0131rken input alanlar\u0131na odaklanmay\u0131 engelliyor. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. \u0130\u015fte bu sorunu `event.stopPropagation()` fonksiyonunu kullanarak nas\u0131l \u00e7\u00f6zebilece\u011fimiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React MUI Data Grid&#039;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data Grid&#039;de ok tu\u015flar\u0131n\u0131 kullanarak input alanlar\u0131nda gezinmenin pratik bir yolunu ele alaca\u011f\u0131z. MUI Data Grid, g\u00fc\u00e7l\u00fc \u00f6zellikleriyle bilinse de, varsay\u0131lan olarak ok tu\u015flar\u0131yla h\u00fccreler aras\u0131nda dola\u015f\u0131rken input alanlar\u0131na odaklanmay\u0131 engelliyor. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. \u0130\u015fte bu sorunu `event.stopPropagation()` fonksiyonunu kullanarak nas\u0131l \u00e7\u00f6zebilece\u011fimiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-31T04:00:11+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React MUI Data Grid&#8217;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme\",\"datePublished\":\"2025-01-31T04:00:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/\"},\"wordCount\":439,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/\",\"name\":\"React MUI Data Grid'de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-01-31T04:00:11+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data Grid'de ok tu\u015flar\u0131n\u0131 kullanarak input alanlar\u0131nda gezinmenin pratik bir yolunu ele alaca\u011f\u0131z. MUI Data Grid, g\u00fc\u00e7l\u00fc \u00f6zellikleriyle bilinse de, varsay\u0131lan olarak ok tu\u015flar\u0131yla h\u00fccreler aras\u0131nda dola\u015f\u0131rken input alanlar\u0131na odaklanmay\u0131 engelliyor. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. \u0130\u015fte bu sorunu `event.stopPropagation()` fonksiyonunu kullanarak nas\u0131l \u00e7\u00f6zebilece\u011fimiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React MUI Data Grid&#8217;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React MUI Data Grid'de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme","description":"Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data Grid'de ok tu\u015flar\u0131n\u0131 kullanarak input alanlar\u0131nda gezinmenin pratik bir yolunu ele alaca\u011f\u0131z. MUI Data Grid, g\u00fc\u00e7l\u00fc \u00f6zellikleriyle bilinse de, varsay\u0131lan olarak ok tu\u015flar\u0131yla h\u00fccreler aras\u0131nda dola\u015f\u0131rken input alanlar\u0131na odaklanmay\u0131 engelliyor. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. \u0130\u015fte bu sorunu `event.stopPropagation()` fonksiyonunu kullanarak nas\u0131l \u00e7\u00f6zebilece\u011fimiz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/","og_locale":"tr_TR","og_type":"article","og_title":"React MUI Data Grid'de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme","og_description":"Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data Grid'de ok tu\u015flar\u0131n\u0131 kullanarak input alanlar\u0131nda gezinmenin pratik bir yolunu ele alaca\u011f\u0131z. MUI Data Grid, g\u00fc\u00e7l\u00fc \u00f6zellikleriyle bilinse de, varsay\u0131lan olarak ok tu\u015flar\u0131yla h\u00fccreler aras\u0131nda dola\u015f\u0131rken input alanlar\u0131na odaklanmay\u0131 engelliyor. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. \u0130\u015fte bu sorunu `event.stopPropagation()` fonksiyonunu kullanarak nas\u0131l \u00e7\u00f6zebilece\u011fimiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-01-31T04:00:11+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"2 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React MUI Data Grid&#8217;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme","datePublished":"2025-01-31T04:00:11+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/"},"wordCount":439,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/","url":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/","name":"React MUI Data Grid'de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-01-31T04:00:11+00:00","description":"Merhaba! Fatih Soysal olarak, bu yaz\u0131da React MUI Data Grid'de ok tu\u015flar\u0131n\u0131 kullanarak input alanlar\u0131nda gezinmenin pratik bir yolunu ele alaca\u011f\u0131z. MUI Data Grid, g\u00fc\u00e7l\u00fc \u00f6zellikleriyle bilinse de, varsay\u0131lan olarak ok tu\u015flar\u0131yla h\u00fccreler aras\u0131nda dola\u015f\u0131rken input alanlar\u0131na odaklanmay\u0131 engelliyor. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. \u0130\u015fte bu sorunu `event.stopPropagation()` fonksiyonunu kullanarak nas\u0131l \u00e7\u00f6zebilece\u011fimiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-mui-data-gridde-ok-tuslariyla-input-alanlarinda-gezinme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React MUI Data Grid&#8217;de Ok Tu\u015flar\u0131yla Input Alanlar\u0131nda Gezinme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/11112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=11112"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/11112\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=11112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=11112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=11112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}