From 064552497e843948920ed7946b00d7d60f64df6e Mon Sep 17 00:00:00 2001 From: Danail Hadjiatanasov Date: Wed, 27 Jan 2021 16:43:08 +0100 Subject: [PATCH] [DataTable] Add example in docs for data table (#24428) --- docs/next.config.js | 6 ++- docs/package.json | 1 + docs/src/pages/components/tables/DataTable.js | 43 +++++++++++++++++++ .../src/pages/components/tables/DataTable.tsx | 43 +++++++++++++++++++ docs/src/pages/components/tables/tables.md | 2 + yarn.lock | 9 ++++ 6 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 docs/src/pages/components/tables/DataTable.js create mode 100644 docs/src/pages/components/tables/DataTable.tsx diff --git a/docs/next.config.js b/docs/next.config.js index bb4c78b04e3892..e0ff53d9a2aeab 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -72,7 +72,9 @@ module.exports = { config.externals = [ (context, request, callback) => { - const hasDependencyOnRepoPackages = ['notistack'].includes(request); + const hasDependencyOnRepoPackages = ['notistack', '@material-ui/data-grid'].includes( + request, + ); if (hasDependencyOnRepoPackages) { return callback(null); @@ -107,7 +109,7 @@ module.exports = { // transpile 3rd party packages with dependencies in this repository { test: /\.(js|mjs|jsx)$/, - include: /node_modules(\/|\\)notistack/, + include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)data-grid)/, use: { loader: 'babel-loader', options: { diff --git a/docs/package.json b/docs/package.json index a74dcec980d951..790ab95d229b0f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -39,6 +39,7 @@ "@material-ui/system": "5.0.0-alpha.24", "@material-ui/types": "5.1.6", "@material-ui/unstyled": "5.0.0-alpha.24", + "@material-ui/data-grid": "^4.0.0-alpha.18", "@trendmicro/react-interpolate": "^0.5.5", "@types/autosuggest-highlight": "^3.1.0", "@types/css-mediaquery": "^0.1.0", diff --git a/docs/src/pages/components/tables/DataTable.js b/docs/src/pages/components/tables/DataTable.js new file mode 100644 index 00000000000000..4d27ce9fb4ef00 --- /dev/null +++ b/docs/src/pages/components/tables/DataTable.js @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { DataGrid } from '@material-ui/data-grid'; + +const columns = [ + { field: 'id', headerName: 'ID', width: 70 }, + { field: 'firstName', headerName: 'First name', width: 130 }, + { field: 'lastName', headerName: 'Last name', width: 130 }, + { + field: 'age', + headerName: 'Age', + type: 'number', + width: 90, + }, + { + field: 'fullName', + headerName: 'Full name', + description: 'This column has a value getter and is not sortable.', + sortable: false, + width: 160, + valueGetter: (params) => + `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`, + }, +]; + +const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, + { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, + { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, + { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, + { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, +]; + +export default function DataTable() { + return ( +
+ +
+ ); +} diff --git a/docs/src/pages/components/tables/DataTable.tsx b/docs/src/pages/components/tables/DataTable.tsx new file mode 100644 index 00000000000000..88363c6bdb4f12 --- /dev/null +++ b/docs/src/pages/components/tables/DataTable.tsx @@ -0,0 +1,43 @@ +import * as React from 'react'; +import { DataGrid, ColDef, ValueGetterParams } from '@material-ui/data-grid'; + +const columns: ColDef[] = [ + { field: 'id', headerName: 'ID', width: 70 }, + { field: 'firstName', headerName: 'First name', width: 130 }, + { field: 'lastName', headerName: 'Last name', width: 130 }, + { + field: 'age', + headerName: 'Age', + type: 'number', + width: 90, + }, + { + field: 'fullName', + headerName: 'Full name', + description: 'This column has a value getter and is not sortable.', + sortable: false, + width: 160, + valueGetter: (params: ValueGetterParams) => + `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`, + }, +]; + +const rows = [ + { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, + { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, + { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, + { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, + { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, + { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, +]; + +export default function DataTable() { + return ( +
+ +
+ ); +} diff --git a/docs/src/pages/components/tables/tables.md b/docs/src/pages/components/tables/tables.md index c7481afc705c76..5b83715a397dee 100644 --- a/docs/src/pages/components/tables/tables.md +++ b/docs/src/pages/components/tables/tables.md @@ -32,6 +32,8 @@ This constraint makes building rich data tables challenging. The [`DataGrid` component](/components/data-grid/) is designed for use-cases that are focused around handling a large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features. +{{"demo": "pages/components/tables/DataTable.js", "bg": "inline"}} + ## Dense table A simple example of a dense table with no frills. diff --git a/yarn.lock b/yarn.lock index 602eaf186defdb..8dc41f587a5c3f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2243,6 +2243,15 @@ npmlog "^4.1.2" write-file-atomic "^2.3.0" +"@material-ui/data-grid@^4.0.0-alpha.18": + version "4.0.0-alpha.18" + resolved "https://registry.yarnpkg.com/@material-ui/data-grid/-/data-grid-4.0.0-alpha.18.tgz#d078a518dd5671f0d1d3fe2de8449b94b8547e9f" + integrity sha512-t4wikroS2s3Aj+zM/mDfG5+8gfF2okUffKRppIqZQVIn+n3K4pAexWC10wqc8ohNFzBEgGzwQjTXEt+Hy2PX0A== + dependencies: + "@material-ui/utils" "^5.0.0-alpha.14" + prop-types "^15.7.2" + reselect "^4.0.0" + "@material-ui/types@^4.0.0", "@material-ui/types@^4.1.1": version "4.1.1" resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b"