mirror of
https://github.com/gosticks/react-table.git
synced 2025-10-16 11:55:36 +00:00
d2acfc4235
* size-snapshot created? * Added docz for documentation site * Modified .gitignore to get rid of .docz internal stuff * Update all doc links to point to proper paths with docz * Removed .docz folder from Git Co-authored-by: Jason Clark <jason.clark@tcnbroadcasting.com>
66 lines
3.5 KiB
Plaintext
66 lines
3.5 KiB
Plaintext
---
|
|
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)
|