---
name: UI/Rendering
route: /examples/ui
menu: Examples
---

# UI and Rendering

These examples demonstrate how to use React Table with your favorite UI libraries or tools!

## Virtualized Rows (React-Window)

- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
  <iframe
    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
    title="tannerlinsley/react-table: virtualized-rows"
    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
  ></iframe>

## Animated (Framer-Motion)

- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
  <iframe
    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
    title="tannerlinsley/react-table: animated-framer-motion"
    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
  ></iframe>

## Material-UI

- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-components)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components)
  <iframe
    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/material-UI-components?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
    title="tannerlinsley/react-table: material-UI-components"
    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
  ></iframe>

## Material-UI Enhanced Table

- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
  <iframe
    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
    title="tannerlinsley/react-table: material-UI-enhanced-table"
    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
  ></iframe>

## Todo

- [ ] Styled-Components
- [ ] CSS
- [ ] Bootstrap

* Want to write one of these examples or add another? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)