Skip to main content

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
  • 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} />),
};