add demo

material-table-core · Aug 1, 2021 · 3b6c63d · 3b6c63d
1 parent 6337c3b
commit 3b6c63d
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 2 deletions.
diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
 // root of this project
 import MaterialTable, { MTableBodyRow, MTableEditRow } from '../../../src';
@@ -483,6 +483,81 @@ export function OneDetailPanel() {
   );
 }
 
+export function EventTargetErrorOnRowClick(props) {
+  const tableRef = React.createRef();
+
+  useEffect(() => {
+    tableRef.current.state.data.forEach((element) => {
+      if (props.selectedRows && props.selectedRows instanceof Array) {
+        const selectedRows = props.selectedRows.find((a) => a === element);
+        if (selectedRows !== undefined) {
+          element.tableData.checked = true;
+        } else if (element.tableData) {
+          element.tableData.checked = false;
+        }
+      }
+    });
+  }, [props.selectedRows, tableRef, props.dataSource]);
+
+  const onRowSelectionChanged = (rows) => {
+    props.onSelectionChange(rows);
+  };
+  const onRowClicked = (evt, rowData) => {
+    evt.persist();
+    console.log(evt.target);
+  };
+
+  const datas = [
+    {
+      id: 1,
+      name: 'Mehmet',
+      surname: 'Baran',
+      birthYear: 1987,
+      birthCity: 63
+    },
+    {
+      id: 2,
+      name: 'Zerya Betül',
+      surname: 'Baran',
+      birthYear: 2017,
+      birthCity: 34
+    },
+    {
+      id: 3,
+      name: 'Pratik',
+      surname: 'N',
+      birthYear: 1900,
+      birthCity: 64
+    }
+  ];
+
+  const cols = [
+    { title: 'Name', field: 'name' },
+    { title: 'Surname', field: 'surname' },
+    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
+    {
+      title: 'Birth Place',
+      field: 'birthCity'
+    }
+  ];
+
+  return (
+    <div>
+      <MaterialTable
+        title={'EventTargetErrorOnRowClick'}
+        tableRef={tableRef}
+        columns={cols}
+        data={datas}
+        onSelectionChange={onRowSelectionChanged}
+        onRowClick={onRowClicked}
+        options={{
+          selection: true
+        }}
+      />
+    </div>
+  );
+}
+
 export function MultipleDetailPanels() {
   return (
     <MaterialTable

diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
@@ -37,7 +37,8 @@ import {
   Resizable,
   EditableRowDateColumnIssue,
   DataSwitcher,
-  DetailPanelIssuesProgrammaticallyHidingWhenOpen
+  DetailPanelIssuesProgrammaticallyHidingWhenOpen,
+  EventTargetErrorOnRowClick
 } from './demo-components';
 import { I1353, I1941, I122 } from './demo-components/RemoteData';
 
@@ -48,6 +49,11 @@ render(
     <h1>Switcher</h1>
     <DataSwitcher />
 
+    <h1>EventTargetErrorOnRowClick</h1>
+    <EventTargetErrorOnRowClick
+      onSelectionChange={(d) => console.log('onSelectionChange', d)}
+    />
+
     <h1>DetailPanelIssuesProgrammaticallyHidingWhenOpen</h1>
     <DetailPanelIssuesProgrammaticallyHidingWhenOpen />