Merge branch 'master' of https://github.com/material-table-core/core

material-table-core · Jul 19, 2021 · 3f31e92 · 3f31e92
2 parents 4c02a7c + faa4c5a
commit 3f31e92
Show file tree

Hide file tree

Showing 11 changed files with 327 additions and 14,258 deletions.
diff --git a/__tests__/demo/demo-components/EditableRowDateColumnIssue/index.js b/__tests__/demo/demo-components/EditableRowDateColumnIssue/index.js
@@ -13,7 +13,7 @@ export default function EditableTable() {
     }
   ]);
 
-  const [data, setData] = useState([{ date: new Date() }]);
+  const [data, setData] = useState([{ date: new Date(), id: 0 }]);
 
   return (
     <MaterialTable

diff --git a/__tests__/demo/demo-components/RemoteData/index.js b/__tests__/demo/demo-components/RemoteData/index.js
@@ -170,7 +170,7 @@ export function I1941() {
               .then((response) => response.json())
               .then((result) => {
                 resolve({
-                  data: result.data,
+                  data: result.data.map((d, i) => ({ ...d, id: i })),
                   page: result.page - 1,
                   totalCount: result.total
                 });
@@ -215,7 +215,7 @@ export function I122() {
             .then((response) => response.json())
             .then((result) => {
               resolve({
-                data: result.data,
+                data: result.data.map((d, i) => ({ ...d, id: i })),
                 page: result.page - 1,
                 totalCount: result.total
               });

diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -5,8 +5,14 @@ import MaterialTable, { MTableBodyRow, MTableEditRow } from '../../../src'; // r
 export { default as EditableRowDateColumnIssue } from './EditableRowDateColumnIssue';
 
 const global_data = [
-  { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
-  { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 }
+  { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63, id: 0 },
+  {
+    name: 'Zerya Betül',
+    surname: 'Baran',
+    birthYear: 2017,
+    birthCity: 34,
+    id: 1
+  }
 ];
 
 const global_data_CustomExport = [
@@ -15,14 +21,16 @@ const global_data_CustomExport = [
     surname: 'Baran',
     birthYear: 1987,
     birthCity: 63,
-    teams: ['Team A', 'Team B']
+    teams: ['Team A', 'Team B'],
+    id: 0
   },
   {
     name: 'Zerya Betül',
     surname: 'Baran',
     birthYear: 2017,
     birthCity: 34,
-    teams: ['Team C', 'Team D', 'Team E']
+    teams: ['Team C', 'Team D', 'Team E'],
+    id: 1
   }
 ];
 
@@ -39,8 +47,8 @@ const global_cols = [
 
 export function BulkEdit() {
   const [data, setData] = useState([
-    { name: 'joe', id: 1, age: 0, x: 'y' },
-    { name: 'nancy', id: 2, age: 1, x: 'b' }
+    { name: 'joe', id: 1, age: 0, x: 'y', id: 0 },
+    { name: 'nancy', id: 2, age: 1, x: 'b', id: 1 }
   ]);
 
   const [columns] = useState([
@@ -80,8 +88,8 @@ export function BulkEdit() {
 
 export function BulkEditWithDetailPanel() {
   const [data, setData] = useState([
-    { name: 'joe', id: 1, age: 0, x: 'y' },
-    { name: 'nancy', id: 2, age: 1, x: 'b' }
+    { name: 'joe', id: 1, age: 0, x: 'y', id: 0 },
+    { name: 'nancy', id: 2, age: 1, x: 'b', id: 1 }
   ]);
 
   const [columns] = useState([
@@ -103,7 +111,7 @@ export function BulkEditWithDetailPanel() {
         options={{
           showDetailPanelIcon: false
         }}
-        detailPanel={(rowData) => {
+        detailPanel={({ rowData }) => {
           return (
             <iframe
               width="100%"
@@ -265,9 +273,7 @@ const global_cols = [
  * Basic demo that shows a single detail panel, in this case a youtube vid
  */
 export function Basic() {
-  return (
-    <MaterialTable title="Basic" columns={global_cols} data={global_data} />
-  );
+  return <MaterialTable title="Basic" columns={global_cols} data={data} />;
 }
 
 export function BasicRef() {
@@ -317,14 +323,14 @@ export function OneDetailPanel() {
       title="One Detail Panel Preview"
       columns={global_cols}
       data={global_data}
-      detailPanel={(rowData) => {
+      detailPanel={({ rowData }) => {
         return (
           <div
             style={{
               fontSize: 100,
               textAlign: 'center',
               color: 'white',
-              backgroundColor: '#43A047',
+              backgroundColor: '#43A047'
             }}
           >
             {rowData.name}
@@ -338,71 +344,71 @@ export function OneDetailPanel() {
 }
 
 export function MultipleDetailPanels() {
-    return (
-      <MaterialTable
-        title="Multiple Detail Panels Preview"
-        columns={global_cols}
-        data={global_data}
-        detailPanel={[
-            {
-              tooltip: 'Show Name',
-              render: rowData => {
-                return (
-                  <div
-                    style={{
-                      fontSize: 100,
-                      textAlign: 'center',
-                      color: 'white',
-                      backgroundColor: '#43A047',
-                    }}
-                  >
-                    {rowData.name}
-                  </div>
-                )
-              },
-            },
-            {
-              icon: 'account_circle',
-              tooltip: 'Show Surname',
-              render: rowData => {
-                return (
-                  <div
-                    style={{
-                      fontSize: 101,
-                      textAlign: 'center',
-                      color: 'white',
-                      backgroundColor: '#E53935',
-                    }}
-                  >
-                    {rowData.surname}
-                  </div>
-                )
-              },
-            },
-            {
-              icon: 'favorite_border',
-              openIcon: 'favorite',
-              tooltip: 'Show Both',
-              render: rowData => {
-                return (
-                  <div
-                    style={{
-                      fontSize: 102,
-                      textAlign: 'center',
-                      color: 'white',
-                      backgroundColor: '#FDD835',
-                    }}
-                  >
-                    {rowData.name} {rowData.surname}
-                  </div>
-                )
-              },
-            },
-          ]}
-        onRowClick={(event, rowData, togglePanel) => togglePanel()}
-      />
-    );
-  }
+  return (
+    <MaterialTable
+      title="Multiple Detail Panels Preview"
+      columns={global_cols}
+      data={global_data}
+      detailPanel={[
+        {
+          tooltip: 'Show Name',
+          render: ({ rowData }) => {
+            return (
+              <div
+                style={{
+                  fontSize: 100,
+                  textAlign: 'center',
+                  color: 'white',
+                  backgroundColor: '#43A047'
+                }}
+              >
+                {rowData.name}
+              </div>
+            );
+          }
+        },
+        {
+          icon: 'account_circle',
+          tooltip: 'Show Surname',
+          render: ({ rowData }) => {
+            return (
+              <div
+                style={{
+                  fontSize: 101,
+                  textAlign: 'center',
+                  color: 'white',
+                  backgroundColor: '#E53935'
+                }}
+              >
+                {rowData.surname}
+              </div>
+            );
+          }
+        },
+        {
+          icon: 'favorite_border',
+          openIcon: 'favorite',
+          tooltip: 'Show Both',
+          render: ({ rowData }) => {
+            return (
+              <div
+                style={{
+                  fontSize: 102,
+                  textAlign: 'center',
+                  color: 'white',
+                  backgroundColor: '#FDD835'
+                }}
+              >
+                {rowData.name} {rowData.surname}
+              </div>
+            );
+          }
+        }
+      ]}
+      onRowClick={(event, rowData, togglePanel) => togglePanel()}
+    />
+  );
+}
 
 // A little bit of everything
 export function FrankensteinDemo() {
@@ -566,12 +572,19 @@ export function DefaultOrderIssue(props) {
         }
       ]}
       data={[
-        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
+        {
+          name: 'Mehmet',
+          surname: 'Baran',
+          birthYear: 1987,
+          birthCity: 63,
+          id: 0
+        },
         {
           name: 'Zerya Betül',
           surname: 'Baran',
           birthYear: 2017,
-          birthCity: 34
+          birthCity: 34,
+          id: 1
         }
       ]}
       options={{

diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
@@ -43,9 +43,6 @@ module.hot.accept();
 
 render(
   <div>
-    <h1>EditableRowDateColumnIssue</h1>
-    <EditableRowDateColumnIssue />
-
     <h1>Basic</h1>
     <Basic />