[core] Initial DataGrid component

docs/data/toolpad/core/components/data-grid/BasicDataProvider.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+  // preview-start
+  async getMany() {
+    return {
+      rows: [
+        { id: '1', name: 'John' },
+        { id: '2', name: 'Jane' },
+      ],
+    };
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function BasicDataProvider() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/BasicDataProvider.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+const myData = createDataProvider({
+  // preview-start
+  async getMany() {
+    return {
+      rows: [
+        { id: '1', name: 'John' },
+        { id: '2', name: 'Jane' },
+      ],
+    };
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function BasicDataProvider() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/BasicDataProvider.tsx.preview

@@ -0,0 +1,8 @@
+async getMany() {
+  return {
+    rows: [
+      { id: '1', name: 'John' },
+      { id: '2', name: 'Jane' },
+    ],
+  };
+},

docs/data/toolpad/core/components/data-grid/CrudCreate.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+let nextId = 1;
+const getNextId = () => {
+  const id = `id-${nextId}`;
+  nextId += 1;
+  return id;
+};
+let DATA = [
+  { id: getNextId(), name: 'John' },
+  { id: getNextId(), name: 'Jane' },
+];
+
+const myData = createDataProvider({
+  async getMany() {
+    return {
+      rows: DATA,
+    };
+  },
+  // preview-start
+  async createOne(values) {
+    const id = getNextId();
+    const newItem = { ...values, id };
+    DATA = [...DATA, newItem];
+    return newItem;
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function CrudCreate() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/CrudCreate.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+let nextId = 1;
+const getNextId = () => {
+  const id = `id-${nextId}`;
+  nextId += 1;
+  return id;
+};
+let DATA = [
+  { id: getNextId(), name: 'John' },
+  { id: getNextId(), name: 'Jane' },
+];
+
+const myData = createDataProvider({
+  async getMany() {
+    return {
+      rows: DATA,
+    };
+  },
+  // preview-start
+  async createOne(values) {
+    const id = getNextId();
+    const newItem = { ...values, id };
+    DATA = [...DATA, newItem];
+    return newItem;
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function CrudCreate() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/CrudCreate.tsx.preview

@@ -0,0 +1,6 @@
+async createOne(values) {
+  const id = getNextId();
+  const newItem = { ...values, id };
+  DATA = [...DATA, newItem];
+  return newItem;
+},

docs/data/toolpad/core/components/data-grid/CrudDelete.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+let nextId = 1;
+const getNextId = () => {
+  const id = `id-${nextId}`;
+  nextId += 1;
+  return id;
+};
+let DATA = [
+  { id: getNextId(), name: 'John' },
+  { id: getNextId(), name: 'Jane' },
+];
+
+const myData = createDataProvider({
+  async getMany() {
+    return {
+      rows: DATA,
+    };
+  },
+  // preview-start
+  async deleteOne(id) {
+    DATA = DATA.filter((item) => item.id !== id);
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function CrudDelete() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/CrudDelete.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+let nextId = 1;
+const getNextId = () => {
+  const id = `id-${nextId}`;
+  nextId += 1;
+  return id;
+};
+let DATA = [
+  { id: getNextId(), name: 'John' },
+  { id: getNextId(), name: 'Jane' },
+];
+
+const myData = createDataProvider({
+  async getMany() {
+    return {
+      rows: DATA,
+    };
+  },
+  // preview-start
+  async deleteOne(id) {
+    DATA = DATA.filter((item) => item.id !== id);
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function CrudDelete() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/CrudDelete.tsx.preview

@@ -0,0 +1,3 @@
+async deleteOne(id) {
+  DATA = DATA.filter((item) => item.id !== id);
+},

docs/data/toolpad/core/components/data-grid/CrudUpdate.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+let nextId = 1;
+const getNextId = () => {
+  const id = `id-${nextId}`;
+  nextId += 1;
+  return id;
+};
+let DATA = [
+  { id: getNextId(), name: 'John' },
+  { id: getNextId(), name: 'Jane' },
+];
+
+const myData = createDataProvider({
+  async getMany() {
+    return {
+      rows: DATA,
+    };
+  },
+  // preview-start
+  async updateOne(id, values) {
+    console.log(id, values);
+    const existing = DATA.find((item) => item.id === id);
+    if (!existing) {
+      throw new Error(`Item with id ${id} not found`);
+    }
+    const updated = { ...existing, ...values };
+    DATA = DATA.map((item) => (item.id === updated.id ? updated : item));
+    return updated;
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function CrudUpdate() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/CrudUpdate.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+let nextId = 1;
+const getNextId = () => {
+  const id = `id-${nextId}`;
+  nextId += 1;
+  return id;
+};
+let DATA = [
+  { id: getNextId(), name: 'John' },
+  { id: getNextId(), name: 'Jane' },
+];
+
+const myData = createDataProvider({
+  async getMany() {
+    return {
+      rows: DATA,
+    };
+  },
+  // preview-start
+  async updateOne(id, values) {
+    console.log(id, values);
+    const existing = DATA.find((item) => item.id === id);
+    if (!existing) {
+      throw new Error(`Item with id ${id} not found`);
+    }
+    const updated = { ...existing, ...values };
+    DATA = DATA.map((item) => (item.id === updated.id ? updated : item));
+    return updated;
+  },
+  // preview-end
+  fields: {
+    id: { label: 'ID' },
+    name: { label: 'Name' },
+  },
+});
+
+export default function CrudUpdate() {
+  return (
+    <Box sx={{ height: 250, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}

docs/data/toolpad/core/components/data-grid/CrudUpdate.tsx.preview

@@ -0,0 +1,10 @@
+async updateOne(id, values) {
+  console.log(id, values);
+  const existing = DATA.find((item) => item.id === id);
+  if (!existing) {
+    throw new Error(`Item with id ${id} not found`);
+  }
+  const updated = { ...existing, ...values };
+  DATA = DATA.map((item) => (item.id === updated.id ? updated : item));
+  return updated;
+},

docs/data/toolpad/core/components/data-grid/FieldInference.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { createDataProvider } from '@toolpad/core/DataProvider';
+import { DataGrid } from '@toolpad/core/DataGrid';
+import Box from '@mui/material/Box';
+
+// preview-start
+const myData = createDataProvider({
+  async getMany() {
+    return {
+      rows: [
+        { id: '1', name: 'John' },
+        { id: '2', name: 'Jane' },
+      ],
+    };
+  },
+  // paste fields here:
+});
+// preview-end
+
+export default function FieldInference() {
+  return (
+    <Box sx={{ height: 300, width: '100%' }}>
+      <DataGrid dataProvider={myData} />
+    </Box>
+  );
+}