Selecting Columns

Replacing the ListGuesser component in the users resource by a custom React component generated by ListGuesser

Author: victorkane

src/App.js

@@ -1,33 +1,13 @@
 import React from 'react';
-import { Admin, Resource, ListGuesser } from 'react-admin';
+import { Admin, Resource } from 'react-admin';
+import { UserList } from './users';
 import jsonServerProvider from 'ra-data-json-server';
 
-/*
-ListGuesser shows the following in the browser console:
-
-Guessed List:
-
-export const UserList = props => (
-    <List {...props}>
-        <Datagrid rowClick="edit">
-            <TextField source="id" />
-            <TextField source="name" />
-            <TextField source="username" />
-            <EmailField source="email" />
-            <TextField source="address.street" />
-            <TextField source="phone" />
-            <TextField source="website" />
-            <TextField source="company.name" />
-        </Datagrid>
-    </List>
-);
-*/
-
 const dataProvider = jsonServerProvider('http://jsonplaceholder.typicode.com');
 const App = () => (
-  <Admin dataProvider={dataProvider}>
-    <Resource name="users" list={ListGuesser} />
-  </Admin>
+    <Admin dataProvider={dataProvider}>
+       <Resource name="users" list={UserList} />
+    </Admin>
 );
 
 export default App;

src/users.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { List, Datagrid, TextField, EmailField } from 'react-admin';
+
+export const UserList = props => (
+    <List {...props}>
+        <Datagrid rowClick="edit">
+            <TextField source="id" />
+            <TextField source="name" />
+            <TextField source="username" />
+            <EmailField source="email" />
+            <TextField source="address.street" />
+            <TextField source="phone" />
+            <TextField source="website" />
+            <TextField source="company.name" />
+        </Datagrid>
+    </List>
+);
+