[Joy] Add Table component (mui#35872)

mnajdova · Jan 30, 2023 · 467a3af · 467a3af
1 parent 31d9c5e
commit 467a3af
Show file tree

Hide file tree

Showing 58 changed files with 4,819 additions and 7 deletions.
diff --git a/docs/data/joy/components/table/BasicTable.js b/docs/data/joy/components/table/BasicTable.js
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Table from '@mui/joy/Table';
+
+export default function BasicTable() {
+  return (
+    <Table aria-label="basic table">
+      <thead>
+        <tr>
+          <th style={{ width: '40%' }}>Dessert (100g serving)</th>
+          <th>Calories</th>
+          <th>Fat&nbsp;(g)</th>
+          <th>Carbs&nbsp;(g)</th>
+          <th>Protein&nbsp;(g)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Frozen yoghurt</td>
+          <td>159</td>
+          <td>6</td>
+          <td>24</td>
+          <td>4</td>
+        </tr>
+        <tr>
+          <td>Ice cream sandwich</td>
+          <td>237</td>
+          <td>9</td>
+          <td>37</td>
+          <td>4.3</td>
+        </tr>
+        <tr>
+          <td>Eclair</td>
+          <td>262</td>
+          <td>16</td>
+          <td>24</td>
+          <td>6</td>
+        </tr>
+        <tr>
+          <td>Cupcake</td>
+          <td>305</td>
+          <td>3.7</td>
+          <td>67</td>
+          <td>4.3</td>
+        </tr>
+        <tr>
+          <td>Gingerbread</td>
+          <td>356</td>
+          <td>16</td>
+          <td>49</td>
+          <td>3.9</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
diff --git a/docs/data/joy/components/table/BasicTable.tsx b/docs/data/joy/components/table/BasicTable.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Table from '@mui/joy/Table';
+
+export default function BasicTable() {
+  return (
+    <Table aria-label="basic table">
+      <thead>
+        <tr>
+          <th style={{ width: '40%' }}>Dessert (100g serving)</th>
+          <th>Calories</th>
+          <th>Fat&nbsp;(g)</th>
+          <th>Carbs&nbsp;(g)</th>
+          <th>Protein&nbsp;(g)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Frozen yoghurt</td>
+          <td>159</td>
+          <td>6</td>
+          <td>24</td>
+          <td>4</td>
+        </tr>
+        <tr>
+          <td>Ice cream sandwich</td>
+          <td>237</td>
+          <td>9</td>
+          <td>37</td>
+          <td>4.3</td>
+        </tr>
+        <tr>
+          <td>Eclair</td>
+          <td>262</td>
+          <td>16</td>
+          <td>24</td>
+          <td>6</td>
+        </tr>
+        <tr>
+          <td>Cupcake</td>
+          <td>305</td>
+          <td>3.7</td>
+          <td>67</td>
+          <td>4.3</td>
+        </tr>
+        <tr>
+          <td>Gingerbread</td>
+          <td>356</td>
+          <td>16</td>
+          <td>49</td>
+          <td>3.9</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
diff --git a/docs/data/joy/components/table/TableAlignment.js b/docs/data/joy/components/table/TableAlignment.js
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Table from '@mui/joy/Table';
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+export default function TableAlignment() {
+  return (
+    <Table sx={{ '& tr > *:not(:first-child)': { textAlign: 'right' } }}>
+      <thead>
+        <tr>
+          <th style={{ width: '40%' }}>Column width (40%)</th>
+          <th>Calories</th>
+          <th>Fat&nbsp;(g)</th>
+          <th>Carbs&nbsp;(g)</th>
+          <th>Protein&nbsp;(g)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.name}>
+            <td>{row.name}</td>
+            <td>{row.calories}</td>
+            <td>{row.fat}</td>
+            <td>{row.carbs}</td>
+            <td>{row.protein}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+}
diff --git a/docs/data/joy/components/table/TableAlignment.tsx b/docs/data/joy/components/table/TableAlignment.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Table from '@mui/joy/Table';
+
+function createData(
+  name: string,
+  calories: number,
+  fat: number,
+  carbs: number,
+  protein: number,
+) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+export default function TableAlignment() {
+  return (
+    <Table sx={{ '& tr > *:not(:first-child)': { textAlign: 'right' } }}>
+      <thead>
+        <tr>
+          <th style={{ width: '40%' }}>Column width (40%)</th>
+          <th>Calories</th>
+          <th>Fat&nbsp;(g)</th>
+          <th>Carbs&nbsp;(g)</th>
+          <th>Protein&nbsp;(g)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.name}>
+            <td>{row.name}</td>
+            <td>{row.calories}</td>
+            <td>{row.fat}</td>
+            <td>{row.carbs}</td>
+            <td>{row.protein}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+}
diff --git a/docs/data/joy/components/table/TableBorder.js b/docs/data/joy/components/table/TableBorder.js
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+import Table from '@mui/joy/Table';
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+export default function TableBorder() {
+  const [borderAxis, setBorderAxis] = React.useState('xBetween');
+  return (
+    <div>
+      <FormControl orientation="horizontal" sx={{ mb: 2, ml: 1 }}>
+        <FormLabel>Border axis:</FormLabel>
+        <Select
+          size="sm"
+          value={borderAxis}
+          onChange={(event, newValue) => setBorderAxis(newValue)}
+        >
+          {['xBetween', 'x', 'yBetween', 'y', 'bothBetween', 'both', 'none'].map(
+            (axis) => (
+              <Option key={axis} value={axis}>
+                {axis}
+              </Option>
+            ),
+          )}
+        </Select>
+      </FormControl>
+      <Table borderAxis={borderAxis}>
+        <thead>
+          <tr>
+            <th style={{ width: '40%' }}>Dessert (100g serving)</th>
+            <th>Calories</th>
+            <th>Fat&nbsp;(g)</th>
+            <th>Carbs&nbsp;(g)</th>
+            <th>Protein&nbsp;(g)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.name}>
+              <th scope="row">{row.name}</th>
+              <td>{row.calories}</td>
+              <td>{row.fat}</td>
+              <td>{row.carbs}</td>
+              <td>{row.protein}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </div>
+  );
+}
diff --git a/docs/data/joy/components/table/TableBorder.tsx b/docs/data/joy/components/table/TableBorder.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+import Table, { TableProps } from '@mui/joy/Table';
+
+function createData(
+  name: string,
+  calories: number,
+  fat: number,
+  carbs: number,
+  protein: number,
+) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+export default function TableBorder() {
+  const [borderAxis, setBorderAxis] =
+    React.useState<TableProps['borderAxis']>('xBetween');
+  return (
+    <div>
+      <FormControl orientation="horizontal" sx={{ mb: 2, ml: 1 }}>
+        <FormLabel>Border axis:</FormLabel>
+        <Select
+          size="sm"
+          value={borderAxis}
+          onChange={(event, newValue) => setBorderAxis(newValue!)}
+        >
+          {['xBetween', 'x', 'yBetween', 'y', 'bothBetween', 'both', 'none'].map(
+            (axis) => (
+              <Option key={axis} value={axis}>
+                {axis}
+              </Option>
+            ),
+          )}
+        </Select>
+      </FormControl>
+      <Table borderAxis={borderAxis}>
+        <thead>
+          <tr>
+            <th style={{ width: '40%' }}>Dessert (100g serving)</th>
+            <th>Calories</th>
+            <th>Fat&nbsp;(g)</th>
+            <th>Carbs&nbsp;(g)</th>
+            <th>Protein&nbsp;(g)</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.name}>
+              <th scope="row">{row.name}</th>
+              <td>{row.calories}</td>
+              <td>{row.fat}</td>
+              <td>{row.carbs}</td>
+              <td>{row.protein}</td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </div>
+  );
+}
diff --git a/docs/data/joy/components/table/TableCaption.js b/docs/data/joy/components/table/TableCaption.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Table from '@mui/joy/Table';
+
+function createData(name, calories, fat, carbs, protein) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+export default function TableCaption() {
+  return (
+    <Table>
+      <caption>A caption should be a summary of the table.</caption>
+      <thead>
+        <tr>
+          <th style={{ width: '40%' }}>Menu</th>
+          <th>Calories</th>
+          <th>Fat&nbsp;(g)</th>
+          <th>Carbs&nbsp;(g)</th>
+          <th>Protein&nbsp;(g)</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.name}>
+            <td>{row.name}</td>
+            <td>{row.calories}</td>
+            <td>{row.fat}</td>
+            <td>{row.carbs}</td>
+            <td>{row.protein}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+}