{"id":4004,"date":"2022-09-23T08:38:20","date_gmt":"2022-09-22T23:38:20","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=4004"},"modified":"2022-10-14T11:59:34","modified_gmt":"2022-10-14T02:59:34","slug":"materialui-change-datagrid-to-select-one-row","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=4004","title":{"rendered":"MaterialUI: Change DataGrid to Select One Row<\/small>"},"content":{"rendered":"

1. Change DataGrid to Select One
\n– Change DataGrid
\n– Check box is hidden
\n– Selection count is hidden
\n– Change multiple row selection to single row selection<\/p>\n

\"\"<\/p>\n

2. node modules
\n@mui\/x-data-grid@5.17.3<\/p>\n

3. Reference
\nhttps:\/\/mui.com\/material-ui\/react-table\/#data-table<\/a><\/p>\n

4. Contents
\n(1) Not use
\n(2) Create selectionObj
\n(3) Force out of focus
\n(4) Component
\n(5) Usage<\/p>\n

5. Not use
\n– useSate
\n– checkboxSelection
\n– disableSelectionOnClick={true}<\/p>\n

6. Create selectionObj
\n– LendingToday.tsx<\/p>\n

\r\nconst CreatetSelectionObj = () => new selectionObj_class() ;\r\n\r\nfunction selectionObj_class() {\r\n\r\n  this.selectionModel = null;\r\n  this.setSelectionModel = (model) => this.selectionModel = model;\r\n  this.getSelectionModel = () => this.selectionModel;\r\n\r\n  return this;\r\n}\r\n<\/pre>\n
7. Force out of focus<\/p>\n
\r\n  const fieldsName = columns.map((row) => (row.field))\r\n\r\n  const cellClickHandler = (e) => {\r\n\r\n    setSelectionModel(e.row)\r\n    let columnNumber = fieldsName.indexOf(e.field) + 1;\r\n\r\n    setTimeout(function (id, columnNumber) {\r\n      let css = `.MuiDataGrid-row:nth-child(${id}) > .MuiDataGrid-cell:nth-child(${columnNumber}) > .MuiDataGrid-cellContent`\r\n      let element = document.querySelector(css);\r\n   \r\n      element.parentNode.blur();\r\n\r\n    }.bind(null, e.row.id, columnNumber), 1);\r\n  }\r\n<\/pre>\n
8. Component
\n– LendingTable.tsx
\n– hideFooterSelectedRowCount<\/p>\n
\r\nimport {  DataGrid, GridColDef } from '@mui\/x-data-grid';\r\n\r\nexport default function LendingTable(props) {\r\n\r\n  const PAGE_SIZE = 5;\r\n\r\n  const setSelectionModel = props.selectionObj.setSelectionModel;\r\n  const getSelectionModel = props.selectionObj.getSelectionModel;\r\n  const fieldsName = columns.map((row, index) => (row.field))\r\n\r\n  const cellClickHandler = (e) => {\r\n\r\n    setSelectionModel(e.row)\r\n\r\n      let columnNumber = fieldsName.indexOf(e.field) + 1;\r\n      setTimeout(function (id, columnNumber) {\r\n      let css = `.MuiDataGrid-row:nth-child(${id}) > .MuiDataGrid-cell:nth-child(${columnNumber}) > .MuiDataGrid-cellContent`\r\n      let element = document.querySelector(css);\r\n\r\n      element.parentNode.blur();\r\n\r\n    }.bind(null, e.row.id, columnNumber), 1);\r\n\r\n  }\r\n\r\n  if (props.rows.length == 0) {\r\n    return;\r\n  }\r\n\r\n<div style={{ height: 400 , width: '100%' }} >\r\n  <DataGrid\r\n    rows={props.rows}\r\n    columns={props.columns}\r\n    pageSize={PAGE_SIZE}\r\n    rowsPerPageOptions={[PAGE_SIZE]}\r\n    density= \"compact\"\r\n    onCellClick={(event) => cellClickHandler(event)}\r\n    hideFooterSelectedRowCount\r\n  \/>\r\n<\/pre>\n
9. Usage
\n– LendingToday.tsx<\/p>\n
\r\nimport { GridColDef } from '@mui\/x-data-grid';\r\nimport LendingTable from '.\/LendingTable';\r\n\r\nconst CreatetSelectionObj = () => new selectionObj_class() ;\r\n\r\nfunction selectionObj_class() {\r\n    this.selectionModel = null;\r\n    this.setSelectionModel = (model) => this.selectionModel = model;\r\n    this.getSelectionModel = () => this.selectionModel;\r\n    return this;\r\n}\r\n\r\nexport default function LendingToday(props) {\r\n\r\n  const selectionObj = CreateSelectionObj()\r\n\r\n  const S_WIDTH = 90;\r\n  const B_WIDTH = 160;\r\n  const D_WIDTH = 110;\r\n\r\n  const columns: GridColDef[] = [\r\n    { field: 'id', headerName: 'Bike No', width: S_WIDTH },\r\n    { field: 'name', headerName: 'Borrower Name', width: B_WIDTH },\r\n    {\r\n      field: 'status',\r\n      headerName: 'Status',\r\n      description: 'This column has a value getter and is not sortable.',\r\n      sortable: false,\r\n      width: S_WIDTH,\r\n      align: 'center',\r\n      valueGetter: (params: GridValueGetterParams) =>\r\n        `${params.row.returnTime? 'Returned' : (params.row.lendingTime? 'On lend': '')}`,\r\n    },\r\n    { field: 'lendingDate', headerName: 'lending Date', width: D_WIDTH }, \r\n    { field: 'lendingTime', headerName: 'lending Time', width: D_WIDTH },\r\n    { field: 'returnDate', headerName: 'Return Date', width: D_WIDTH },\r\n    { field: 'returnTime', headerName: 'Return Time', width: D_WIDTH },\r\n  ];\r\n\r\n  return (\r\n    <>\r\n      <LendingTable\r\n        rows={props.rows} \r\n        selectionObj={selectionObj}\r\n        columns={columns}\r\n      \/>\r\n    <\/>\r\n  )\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
1. Change DataGrid to Select One – Change DataGrid – Check box is hidden – Selection count i…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4004"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4004"}],"version-history":[{"count":58,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4004\/revisions"}],"predecessor-version":[{"id":4008,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/4004\/revisions\/4008"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}