Demos#

Introduction#

More info on demos. Each demo should have a live code block for you to tinker with.

How To Add Demo#

General Info#

  • Your demo should be placed in a folder under ~/demos.
    • For example, ~/demos/override/row
  • You have the ability to use React inside of markdown
    • Make sure your file ends in .mdx
    • Refer to an existing demo file for a better understanding
  • Each .mdx or .md file has to have a header

Sidebar#

  • To show your demo in the sidebar you need to edit ~/sidebar.demos.js
    • If I wanted to add a demo to the URL /demo/override/row I would
      • Create a file at ~/demos/override/row.md could also use .mdx extension
      • Update sidebar.demos.js
      • *The id needs to be the same as the ending of the path you put into ~/sidebar.demos.js

row.mdx#

---
id: row
// ...
---

sidebar.demos.js#

module.exports = {
sidebar: [
// ...
{
type: "category",
label: "Override Components",
items: [
"override/toolbar"
+ "override/row"
],
},
// ...
]
}

Demo Environment#

In order to keep our demos succinct, we take advantage of "global variables". Global variables will be in all caps snake case.

<MaterialTable
data={DEMO_DATA}
columns={DEMO_COLS}
// ...
/>

Environmental Variables#

The values for our global environmental variables can be found below.

Important Note#

PLEASE NOTE

The list below may not be up to date! Please see here for more

DEMO_DATA#

This data is passed into <MaterialTable data={...} />

const DEMO_DATA = [
{ id: 2, name: "Joe" },
{ id: 1, name: "Mary" },
];

DEMO_COLS#

This data is passed into <MaterialTable columns={...} />

const DEMO_COLS = [
{ field: "id", title: "Id" },
{ field: "name", title: "Name" },
];

TABLE_ICONS#

This data is passed into <MaterialTable icons={...} />

The base icons are supplied out of the box.

const TABLE_ICONS = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props & { level?: number; row?: RowData }, ref) => (
<ChevronRight {...props} ref={ref} />
)),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => (
<ChevronLeft {...props} ref={ref} />
)),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
};