Data Grid component for CRUD ("Create Read Update Delete") applications.
-Toolpad Core extends the X grid with CRUD functionality. It abstracts the manipulations in a data provider object. The data provider object describes the shape of the data and the available manipulations. When you pass the data provider to a grid it is automatically configured as a CRUD grid. All properties of the X grid are also available and can be used to override the data provider behavior.
+Toolpad Core extends the [X data grid](https://mui.com/x/react-data-grid/) with CRUD functionality. It abstracts the manipulations in a data provider object. The data provider object describes the shape of the data and the available manipulations. When you pass the data provider to a grid it is automatically configured as a CRUD grid. All properties of the X grid are also available and can be used to override the data provider behavior.
Where Core and X components focus on the user interface, Toolpad Core components start from a definition of the data. It centralizes data loading, filtering, pagination, field formatting, mutations, access control and more.
@@ -20,13 +20,13 @@ The simplest data provider exposes a `getMany` function and a `fields` definitio
## Override columns
-The Toolpad Core grid adopts the fields that are defined in its data provider. This is handy because it allows for sharing formatting and validation options between data rendering components. But it is still possible to override the defaults at the level of an individual grid. The grid adopts the columns you've defined in the `columns` property, and sets default values for the individual column options for each of them.
+The Toolpad Core grid adopts the fields that are defined in its data provider. This is handy because it allows for sharing formatting and validation options between data rendering components. However, it is still possible to override the defaults at the level of an individual grid. The grid adopts the columns you've defined in the `columns` property, and sets default values for the individual column options for each of them.
{{"demo": "OverrideColumns.js"}}
-## Column inferrence
+## Column inference
-To help you get started quickly, the grid is able to inferrence data provider fields if they are not defined. This allows you to quickly get started with a basic field definition based on the returned data. When a data provider is passed that doesn't have a field definiton, the grid infers field definitions and shows a warning. Click the question mark to show more information on how to solve the warning message. Try copying the snippet from the dialog and paste it in the data provider definition below:
+To help you get started quickly, the grid is able to infer data provider fields if they are not defined. This allows you to quickly get started with a basic field definition based on the returned data. When a data provider is passed that doesn't have a field definiton, the grid infers field definitions and shows a warning. Click the question mark to show more information on how to solve the warning message. Try copying the snippet from the dialog and paste it in the data provider definition below:
{{"demo": "FieldInference.js"}}
@@ -42,25 +42,25 @@ You can decide whether your data provider supports pagination exclusively or opt
The data provider supports all basic CRUD operations
-### Create
+### Create a row
When you add a `createOne` method to the data provider, the grid gets a "Add record" button in the Toolbar. When you click this button, a draft row shows wich you can fill with values for the created item. To commit the new row, click the save button. This calls the `createOne` function with the values that were filled. When the operation finishes, a notification shows.
{{"demo": "CrudCreate.js"}}
-### Update
+### Update a row
When you add a `updateOne` method to the data provider, the grid gets edit buttons in its action column. When you click this button, the row goes in editing mode. When you click the save button, the `updateOne` method is called with the row id as first parameter and the changed values as the second parameter. When the operation finishes, a notification shows.
{{"demo": "CrudUpdate.js"}}
-### Delete
+### Delete a row
When you add a `deleteOne` method to your data provider, the grid gets delete buttons in its action column. When you click this button, the `deleteOne` method is called with the id of the relevant row. When the operation finishes, a notification shows.
{{"demo": "CrudDelete.js"}}
-### π§ Delete multiple
+### π§ Delete multiple rows
When the data provider contains a `deleteMany` method, the grid allows for multiple selection and delete.
diff --git a/docs/data/toolpad/core/components/index.md b/docs/data/toolpad/core/components/index.md
index d08d3d8541..90b8366629 100644
--- a/docs/data/toolpad/core/components/index.md
+++ b/docs/data/toolpad/core/components/index.md
@@ -5,4 +5,3 @@
- [Dashboard Layout](/toolpad/core/components/dashboard-layout/)
- [Data Grid](/toolpad/core/components/data-grid/)
- [Line Chart](/toolpad/core/components/line-chart/)
-- [Select Filter](/toolpad/core/components/select-filter/)
diff --git a/docs/data/toolpad/core/features/data-providers.md b/docs/data/toolpad/core/features/data-providers.md
index cb2614cc40..2cd2d96299 100644
--- a/docs/data/toolpad/core/features/data-providers.md
+++ b/docs/data/toolpad/core/features/data-providers.md
@@ -4,7 +4,7 @@
## Interface
-A data provider is a stateless interface representing a collection of remote data. It mainly contains method to fetch and manipulate this data, along with certain additional methods for certain data providers.
+A data provider is a stateless interface representing a collection of remote data. It mainly contains methods to fetch and manipulate this data, along with certain additional methods for certain data providers.
```tsx
import { createDataProvider } from '@toolpad/data';
@@ -34,10 +34,6 @@ const sharedDataSource = useSharedDataProvider(dataProvider, {
});
```
-:::info
-Find more details in the [connecting to components](/toolpad/data/connecting-to-components/) page
-:::
-
## Server-side data providers
```tsx
diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.js b/docs/data/toolpad/core/introduction/TutorialDefault.js
new file mode 100644
index 0000000000..5a90f2cb21
--- /dev/null
+++ b/docs/data/toolpad/core/introduction/TutorialDefault.js
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
+const NAVIGATION = [
+ {
+ title: 'Page',
+ icon: ,
+ },
+];
+
+export default function TutorialDefault() {
+ return (
+
+
+
+ Dashboard content
+
+
+
+ );
+}
diff --git a/docs/data/toolpad/core/introduction/build-deploy.md b/docs/data/toolpad/core/introduction/build-deploy.md
index 6199b44092..22e9f29ff0 100644
--- a/docs/data/toolpad/core/introduction/build-deploy.md
+++ b/docs/data/toolpad/core/introduction/build-deploy.md
@@ -1,3 +1,57 @@
# Build and Deploy
With Toolpad Core, you can build and deploy on your own terms
+
+## Install step
+
+Install required depdencies via:
+
+
+
+```bash npm
+npm install
+```
+
+```bash yarn
+yarn
+```
+
+
+
+## Build step
+
+This command creates an optimized production build for the app and outputs the generated files:
+
+
+
+```bash npm
+npm run build
+```
+
+```bash yarn
+yarn build
+```
+
+```bash pnpm
+pnpm build
+```
+
+
+
+## Start step
+
+Once the build has been made, you can deploy it to any service of your choice!
+
+To serve the app once built, run:
+
+
+
+```bash npm
+npm run start
+```
+
+```bash yarn
+yarn start
+```
+
+
diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md
index b8cffeeed0..352bfe4412 100644
--- a/docs/data/toolpad/core/introduction/examples.md
+++ b/docs/data/toolpad/core/introduction/examples.md
@@ -1,3 +1,12 @@
-# Examples
+---
+productId: toolpad-core
+title: Examples
+---
-
Examples
+# Toolpad Core - Examples
+
+
Browse a collection of Toolpad Core examples to help you get started quickly:
Learn how to install Toolpad Core in your local environment.
+
+1. Run the following command to start Toolpad Core:
+
+
+
+```bash npm
+npx create-toolpad-app@latest --core
+```
+
+```bash pnpm
+pnpm create toolpad-app --core
+```
+
+```bash yarn
+yarn create toolpad-app --core
+```
+
+
+
+2. Follow the instructions presented. Once the installation ends, run:
+
+
+
+```bash npm
+cd
+npm run dev
+```
+
+```bash pnpm
+cd
+pnpm run dev
+```
+
+```bash yarn
+cd
+yarn dev
+```
+
+
+
+3. Visit **http://localhost:3000/** in your browser to open the application.
+
+4. The CLI bootstraps the following directory:
+
+ ```bash
+ βββ app
+ β βββ auth
+ β βββββ [...path]
+ β βββββββ page.tsx
+ β βββ api
+ β βββββ auth
+ β βββββββ [...nextAuth]
+ β ββββββββββ route.tsx
+ β βββ (dashboard)
+ | βββββ layout.tsx
+ β βββββ page
+ β βββββββ page.tsx
+ βββββ layout.tsx
+ βββββ page.tsx
+
+ ```
+
+ and the following page appears when you run the project locally:
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/installation-1.png", "alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }}
+
+5. Installation is complete! Begin building your project by making edits to `(dashboard/page/page.tsx`. To understand how to leverage Toolpad Core to build dashboards quickly, [see the detailed tutorial](/toolpad/core/introduction/tutorial/).
diff --git a/docs/data/toolpad/core/introduction/overview.md b/docs/data/toolpad/core/introduction/overview.md
index 8ab9a14ed3..9e103476ec 100644
--- a/docs/data/toolpad/core/introduction/overview.md
+++ b/docs/data/toolpad/core/introduction/overview.md
@@ -1,195 +1,40 @@
---
-title: Overview
+title: Toolpad Overview
---
-# Toolpad - Overview
+# Toolpad Core
-
Learn the fundamentals of building with Toolpad Core by creating a small application.
+
A framework to build full-stack apps, fast. It can be used as a Next.js starter, or integrated within an existing React project to build dashboards and internal tools.
-## Installation
+This framework leverages the existing suite of components offered by MUI, and ties them together with the most commonly-used backend integrations to help you create dashboards fast. Imagine a React dashboard template but with backend features like authentication, role-based access control and data fetching already included. It comes with the guarantee of MUI's enterprise-tested components, and the Toolpad team's focus on using the latest stable libraries, and prioritising razor-sharp performance.
-Run
+{{"demo": "../components/dashboard-layout/DashboardLayoutNavigation.js", "height": 640, "iframe": true}}
-
+## Overview
-```bash yarn
-yarn create toolpad-app --core
-```
+:::info
+Visit the [installation guide](/toolpad/core/installation/) to learn how to install the package correctly.
+:::
-```bash pnpm
-pnpm dlx create-toolpad-app --core
-```
+Toolpad can be multiple things: a set of low-level primitives for common use-cases like state management across components, a Next.js starter with features like authentication and data-fetching baked-in, or an umbrella framework to help bring together your existing internal tooling applications. To sum up: it is a framework that integrates many disparate libraries with MUI's components, which otherwise require a lot of inefficient glue code to work together. The framework is accessible through a Command Line Interface (CLI) which generates starter code quickly based on features needed or example templates to be followed.
-
+The framework follows the open-core model, with some features being available under the MIT license, and some being under a paid license.
-Follow the instructions of the CLI. After you conclude the installation process, change your working dir to the project and run
-
+## Features
-```bash npm
-npm run dev
-```
+- Built with and exclusively for React βοΈ
+- High performance π
+- [Layout and Navigation](/toolpad/core/react-dashboard-layout/)
+- [Data Providers](/toolpad/core/features/data-providers/)
+- [Data Grid](/toolpad/core/react-data-grid/)
-```bash yarn
-yarn dev
-```
+## Upcoming Features π§
-```bash pnpm
-pnpm dev
-```
+:::info
+Visit the [roadmap](/toolpad/core/introduction/roadmap/) to see more details around upcoming features.
+:::
-
-
-Visit **http://localhost:3000/** in your browser to open the application
-
-## Options of the CLI
-
-- Do you want to enable authentication?
- - select authentication method
- - follow instructions at XYZ and paste the auth token (written to .env)
-- Do you want to enable RBAC
-- β¦?
-
-The CLI scaffolds a Next.js project with all Toolpad features set up
-
-## Tutorial
-
-1. Run
- `bash
- yarn create toolpad-app --tutorial my-first-project
-`
-
- This will prompt for a project name and create a basic project for this tutorial
-
-2. Install the packages necessary for this example
-
- ```bash
- yarn add -S @mui/x-data-grid @mui/x-charts @mui/toolpad-data-csv
- ```
-
-3. Run
-
- ```bash
- cd my-first-project
- yarn dev
- ```
-
- to start the app in dev mode
-
-4. Create a file `/app/hello-world/page.tsx` and add
-
- ```tsx
- import * as React from 'react';
-
- export default async function HelloWorld() {
- return
Hello world!
;
- }
- ```
-
-In your browser open the page http://localhost:3000/hello-world and verify that it shows "Hello World!"
-
-5. Now to add our first data provider. Copy the sample CSV file (insert link) to the project root and add the following
-
- ```tsx
- import * as React from 'react';
- import createDataProviderCsv from '@mui/toolpad-data-csv';
- import DataGrid from '@mui/x-data-grid';
- import { useDataGrid } from '@mui/toolpad';
-
- const myCsvData = createDataProviderCsv('./sample-data.csv');
-
- export default async function HelloWorld() {
- const dataGridProps = useDataGrid(myCsvData);
-
- return (
-
-
-
- );
- }
- ```
-
-
-
-6. This is great, but we'd also like to visualise this data:
-
- ```tsx
- import * as React from 'react';
- import createDataProviderCsv from '@mui/toolpad-data-csv';
- import DataGrid from '@mui/x-data-grid';
- import { BarChart } from '@mui/x-charts';
- import { useDataGrid, useChart } from '@mui/toolpad';
-
- const myCsvData = createDataProviderCsv('./sample-data.csv');
-
- export default async function HelloWorld() {
- const dataGridProps = useDataGrid(myCsvData);
- const chartProps = useChart(myCsvData, {
- xAxis: 'categories',
- yAxis: ['values'],
- });
-
- return (
-
-
-
-
- );
- }
- ```
-
-
-
- Now both the data grid and the chart display the CSV data
-
-7. Wouldn't it be nice if the chart also displayed the data in the grid as it was filtered?
-
- ```tsx
- import * as React from 'react';
- import createDataProviderCsv from '@mui/toolpad-data-csv';
- import DataGrid, { GridFilterModel } from '@mui/x-data-grid';
- import { BarChart } from '@mui/x-charts';
- import { useDataGrid, useChart, useSharedDataProvider } from '@mui/toolpad';
-
- const myCsvData = createDataProviderCsv('./sample-data.csv');
-
- export default async function HelloWorld() {
- const [filterModel, setFilterModel] = React.useState({});
-
- const mySharedProvider = useSharedDataProvider(myCsvData, {
- filterModel,
- setFilterModel,
- });
-
- const dataGridProps = useDataGrid(mySharedProvider);
- const chartProps = useChart(mySharedProvider, {
- xAxis: 'categories',
- yAxis: ['values'],
- });
-
- return (
-
Know our plan for the features we intend to support in the coming months
+
Find out about future plans for Toolpad Core.
+
+## Toolpad Core roadmap
+
+The roadmap is publicly visible on [GitHub](https://github.com/orgs/mui/projects/9).
+
+:::warning
+Toolpad Core is being built in a dynamic environment, so things are subject to change.
+The information provided is intended to outline the general direction, but is for informational purposes only.
+
+New items may be added and existing ones may be removed at any time, depending on the team's capability to deliver, while meeting existing quality standards.
+The development, releases, and timing of any features or functionality remains at the sole discretion of the company.
+The roadmap does not represent a commitment, obligation, or promise to deliver at any time.
+:::
diff --git a/docs/data/toolpad/core/introduction/support.md b/docs/data/toolpad/core/introduction/support.md
index fd339e1054..8166e24f75 100644
--- a/docs/data/toolpad/core/introduction/support.md
+++ b/docs/data/toolpad/core/introduction/support.md
@@ -1,3 +1,49 @@
# Support
-
Support
+
From community guidance to critical business support, we're here to help.
+
+## Community help
+
+Welcome to the MUI community as a Toolpad Core user!
+These are the best places to start asking questions and looking for answers when you need help.
+
+### GitHub
+
+Toolpad uses GitHub issues to track bug reports and feature requests.
+
+If you think you've found a bug in the codebase, or you have an idea for a new feature, please [search the issues on GitHub](https://github.com/mui/mui-toolpad/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed) before opening a new one, to ensure you're not creating a duplicate.
+
+- [Open an issue on GitHub](https://github.com/mui/mui-toolpad/issues/new/choose) for issues or feature requests.
+- [Start a GitHub discussion](https://github.com/mui/mui-toolpad/discussions) for a broad topic. Here you can engage with the team and the discussion would likely result in one or more GitHub issues.
+
+#### New issue guidelines
+
+- Please follow one of the issue templates provided on GitHub.
+- Please use a succinct description that helps others find similar issues.
+ - β _"It doesn't work"_
+ - β _"Add support for {{new feature}}"_
+- Please don't group multiple topics in one issue.
+- Please don't comment "+1" on an issue. It spams the maintainers and doesn't help move the issue forward. Use GitHub reactions instead (π).
+
+### Discord
+
+Toolpad is also present on Discord, you can connect with other users and get help from the community. To join, simply click on this [Discord server](https://mui.com/r/discord/) and follow the instructions. Looking forward to seeing you there!
+
+:::warning
+Please note that there is a single Discord server for all MUI products and you should post in the Toolpad channel.
+:::
+
+### StackΒ Overflow
+
+StackΒ Overflow contains a wealth of information about MUI products. Toolpad Core is a new product and you can start by [posting a question](https://stackoverflow.com/questions/tagged/toolpad) to get help from community experts as well as maintainers.
+
+### Social media
+
+Toolpad has a growing presence on [Twitter/X](https://twitter.com/Toolpad_).
+You can use it to share what you're working on and connect with other developers.
+
+Please keep in mind that we don't actively monitor direct messages on the company's social media accounts, so this is _not_ a good way to get in touch with us directly.
+
+### Direct email
+
+If email is your thing, the team can be directly reached at toolpad@mui.com.
diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md
index 0fbef047f2..5dc9b4d0f4 100644
--- a/docs/data/toolpad/core/introduction/tutorial.md
+++ b/docs/data/toolpad/core/introduction/tutorial.md
@@ -1,3 +1,105 @@
-# Tutorial
+---
+title: Tutorial
+---
-
Tutorial
+# Toolpad Core - Tutorial
+
+
Learn how to use Toolpad Core through an illustrative example dashboard.
+
+## Bootstrapping
+
+
+
+1. To choose a project name and create a basic project for this tutorial, run:
+
+
+
+```bash npm
+npx create-toolpad-app@latest --example core-tutorial
+```
+
+```bash pnpm
+pnpm create toolpad-app --example core-tutorial
+```
+
+```bash yarn
+yarn create toolpad-app --example core-tutorial
+```
+
+
+
+2. To start the basic project on [http://localhost:3000](http://localhost:3000/), run:
+
+
+
+```bash npm
+cd
+npm install && npm run dev
+```
+
+```bash pnpm
+cd
+pnpm install && pnpm dev
+```
+
+```bash yarn
+cd
+yarn && yarn dev
+```
+
+
+
+3. The following splash screen appears:
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/installation-1.png", "alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }}
+
+4. The app has one page already created, which can be viewed by clicking on the "Go to page" button. The following page should appear:
+
+{{"demo": "TutorialDefault.js", "iframe": true, "hideToolbar": true }}
+
+## Create a new page
+
+
+
+1. To add a new page and make it appear in the sidebar navigation, create a new folder within the `(dashboard)` directory titled `page-2` and add the following content to `page.tsx` inside it:
+
+```tsx
+import { Typography, Container } from '@mui/material';
+export default function Home() {
+ return (
+
+
+
+ This is page 2!
+
+
+
+ );
+}
+```
+
+2. Add the newly created page to the sidebar navigation by adding the following code to the navigation items array in `app/layout.tsx`:
+
+```tsx
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ slug: '/page',
+ title: 'Page',
+ icon: ,
+ },
+ // Add the following new item:
+ {
+ slug: '/page-2',
+ title: 'Page 2',
+ icon: ,
+ },
+];
+```
+
+The newly created page can now be navigated to from the sidebar, like the following:
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/tutorial-2.gif", "alt": "Toolpad Core new page", "caption": "Adding pages to navigation", "zoom": true, "indent": 1 }}
diff --git a/docs/data/toolpad/core/pages.ts b/docs/data/toolpad/core/pages.ts
index 439c3de17b..ba79586428 100644
--- a/docs/data/toolpad/core/pages.ts
+++ b/docs/data/toolpad/core/pages.ts
@@ -1,6 +1,8 @@
import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage';
import pagesApi from './pagesApi';
+// TODO: Split pagesApi into components and hooks
+
const pages: MuiPage[] = [
{
pathname: '/toolpad/core/intro-group',
@@ -38,20 +40,10 @@ const pages: MuiPage[] = [
pathname: '/toolpad/core/features-group',
subheader: 'Features',
children: [
- {
- pathname: '/toolpad/core/features/authentication',
-
- title: 'Authentication',
- },
{
pathname: '/toolpad/core/features/data-providers',
title: 'Data Providers',
},
- {
- pathname: '/toolpad/core/features/audit-logs',
- title: 'Audit Logs',
- plan: 'pro',
- },
],
},
],
@@ -97,11 +89,13 @@ const pages: MuiPage[] = [
{
pathname: '/toolpad/core/api-group',
title: 'APIs',
- children: pagesApi,
- },
- {
- pathname: '/toolpad/core/customization',
- title: 'Customization',
+ children: [
+ {
+ pathname: '/toolpad/core/api/components-group',
+ subheader: 'Components',
+ children: pagesApi,
+ },
+ ],
},
];
diff --git a/docs/data/toolpad/studio/getting-started/examples-overview.md b/docs/data/toolpad/studio/getting-started/examples-overview.md
index efa6c66264..95335641cf 100644
--- a/docs/data/toolpad/studio/getting-started/examples-overview.md
+++ b/docs/data/toolpad/studio/getting-started/examples-overview.md
@@ -13,4 +13,4 @@ This collection includes apps that showcase connecting to APIs, adding custom co
If you're interested in how we, at MUI, use Toolpad Studio to build internal apps, check out the [blog post](https://mui.com/blog/toolpad-use-cases/).
-{{"component": "modules/components/ExamplesGrid.js"}}
+{{"component": "modules/components/ExamplesGrid/ExamplesGrid.tsx", "examplesFile": "studio-examples.ts"}}
diff --git a/docs/public/static/toolpad/docs/core/installation-1.png b/docs/public/static/toolpad/docs/core/installation-1.png
new file mode 100644
index 0000000000..fadff5c62e
Binary files /dev/null and b/docs/public/static/toolpad/docs/core/installation-1.png differ
diff --git a/docs/public/static/toolpad/docs/core/tutorial-1.png b/docs/public/static/toolpad/docs/core/tutorial-1.png
new file mode 100644
index 0000000000..7ec559c063
Binary files /dev/null and b/docs/public/static/toolpad/docs/core/tutorial-1.png differ
diff --git a/docs/public/static/toolpad/docs/core/tutorial-2.gif b/docs/public/static/toolpad/docs/core/tutorial-2.gif
new file mode 100644
index 0000000000..4e9f1b8a02
Binary files /dev/null and b/docs/public/static/toolpad/docs/core/tutorial-2.gif differ
diff --git a/docs/src/modules/components/ExamplesGrid/ExamplesGrid.tsx b/docs/src/modules/components/ExamplesGrid/ExamplesGrid.tsx
new file mode 100644
index 0000000000..9026b6ebd1
--- /dev/null
+++ b/docs/src/modules/components/ExamplesGrid/ExamplesGrid.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { alpha } from '@mui/material/styles';
+
+interface Example {
+ title: string;
+ description: string;
+ src: string;
+ href: string;
+ source: string;
+}
+
+interface TemplatesProps {
+ examplesFile: string;
+}
+
+function Templates({ examplesFile }: TemplatesProps) {
+ const [examples, setExamples] = React.useState([]);
+
+ React.useEffect(() => {
+ const importExamples = async () => {
+ const exampleContent = await import(`./${examplesFile}`);
+ setExamples(exampleContent.default);
+ };
+ importExamples();
+ }, [examplesFile]);
+
+ return (
+
+ {examples.map((example) => (
+
+ ({
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ px: 2,
+ pt: 2,
+ pb: 1,
+ gap: 1.5,
+ borderRadius: 1,
+ backgroundColor: `${alpha(theme.palette.grey[50], 0.4)}`,
+ borderColor: 'divider',
+ ...theme.applyStyles('dark', {
+ backgroundColor: `${alpha(theme.palette.primary.dark, 0.1)}`,
+ borderColor: 'divider',
+ }),
+ })}
+ variant="outlined"
+ >
+ ({
+ height: 0,
+ pt: '65%',
+ borderRadius: 0.5,
+ bgcolor: 'currentColor',
+ border: '1px solid',
+ borderColor: 'grey.100',
+ color: 'grey.100',
+ ...theme.applyStyles('dark', {
+ borderColor: 'grey.900',
+ color: 'primaryDark.900',
+ }),
+ })}
+ />
+
+
+ {example.title}
+
+
+ {example.description}
+
+
+
+
+
+
+
+ ))}
+
+ );
+}
+
+export default Templates;
diff --git a/docs/src/modules/components/ExamplesGrid/core-examples.ts b/docs/src/modules/components/ExamplesGrid/core-examples.ts
new file mode 100644
index 0000000000..72b0d3df63
--- /dev/null
+++ b/docs/src/modules/components/ExamplesGrid/core-examples.ts
@@ -0,0 +1,12 @@
+export default function examples() {
+ return [
+ {
+ title: 'Tutorial app',
+ description:
+ 'This app shows you to get started with Toolpad Core and use basic layout and navigation features.',
+ src: '/static/toolpad/docs/core/tutorial-1.png',
+ href: 'https://mui.com/toolpad/core/introduction/tutorial/',
+ source: 'https://github.com/mui/mui-toolpad/tree/master/examples/core-tutorial',
+ },
+ ];
+}
diff --git a/docs/src/modules/components/ExamplesGrid.js b/docs/src/modules/components/studio-examples.ts
similarity index 68%
rename from docs/src/modules/components/ExamplesGrid.js
rename to docs/src/modules/components/studio-examples.ts
index 9733993732..140b7179ee 100644
--- a/docs/src/modules/components/ExamplesGrid.js
+++ b/docs/src/modules/components/studio-examples.ts
@@ -1,14 +1,4 @@
-import * as React from 'react';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import { alpha } from '@mui/material/styles';
-
-function layouts() {
+export default function examples() {
return [
{
title: 'npm stats',
@@ -125,69 +115,3 @@ function layouts() {
},
];
}
-
-function Templates() {
- return (
-
- {layouts().map((layout) => (
-
- ({
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- px: 2,
- pt: 2,
- pb: 1,
- gap: 1.5,
- borderRadius: 1,
- backgroundColor: `${alpha(theme.palette.grey[50], 0.4)}`,
- borderColor: 'divider',
- ...theme.applyDarkStyles({
- backgroundColor: `${alpha(theme.palette.primaryDark[700], 0.3)}`,
- borderColor: 'divider',
- }),
- })}
- variant="outlined"
- >
- ({
- height: 0,
- pt: '65%',
- borderRadius: 0.5,
- bgcolor: 'currentColor',
- border: '1px solid',
- borderColor: 'grey.100',
- color: 'grey.100',
- ...theme.applyDarkStyles({
- borderColor: 'grey.900',
- color: 'primaryDark.900',
- }),
- })}
- />
-
-
- {layout.title}
-
-
- {layout.description}
-
-
-
-
-
-
-
- ))}
-
- );
-}
-
-export default Templates;
diff --git a/packages/toolpad-core/src/DataGrid/DataGrid.tsx b/packages/toolpad-core/src/DataGrid/DataGrid.tsx
index 6b0b59a58c..d2cc238688 100644
--- a/packages/toolpad-core/src/DataGrid/DataGrid.tsx
+++ b/packages/toolpad-core/src/DataGrid/DataGrid.tsx
@@ -46,7 +46,7 @@ import {
ValidId,
DEFAULT_ID_FIELD,
} from '../DataProvider';
-import InferencingAlert from './InferrencingAlert';
+import InferencingAlert from './InferencingAlert';
import {
NotificationSnackbar,
DataGridNotification,
diff --git a/packages/toolpad-core/src/DataGrid/InferrencingAlert.tsx b/packages/toolpad-core/src/DataGrid/InferencingAlert.tsx
similarity index 97%
rename from packages/toolpad-core/src/DataGrid/InferrencingAlert.tsx
rename to packages/toolpad-core/src/DataGrid/InferencingAlert.tsx
index 72ced3ccc2..10c09f40fb 100644
--- a/packages/toolpad-core/src/DataGrid/InferrencingAlert.tsx
+++ b/packages/toolpad-core/src/DataGrid/InferencingAlert.tsx
@@ -47,7 +47,7 @@ function CodeSnippet({ children }: { children: string }) {
);
}
-const INFERENCING_DOCS_URL = 'https://mui.com/toolpad/core/components/data-grid/#column-inferrence';
+const INFERENCING_DOCS_URL = 'https://mui.com/toolpad/core/react-data-grid/#column-inference';
interface InferencingDialogProps {
open: boolean;