Skip to content

Instantly share code, notes, and snippets.

View oliviertassinari's full-sized avatar

Olivier Tassinari oliviertassinari

View GitHub Profile
Features react-data-grid react-table material-table hand-sontable ag-gird antd Kendo Syncfusion datatables.net
Stars 3.5k 7k 1k 12k 6k
Downloads 280k 1.1m 90k 190k 400k 33k 5k 550k
Bundle size 40kB 11kB 85kB 315kB 250kB 20kB 425kB 56kB
Docs traffic 95k 230k 1.3m
Row sorting free free free 💰 free free 💰 💰 free
Filtering free free free 💰 free free 💰 💰 free
Cell editing free free free 💰 free free 💰 💰 💰
Column with groups free 💰 free free 💰 💰 free
@oliviertassinari
oliviertassinari / Variant.js
Created January 3, 2019 19:10
Build your own design system
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import { style, typography } from "@material-ui/system";
const variant = style({
prop: "variant",
cssProperty: false,
themeKey: "typography"
});
@oliviertassinari
oliviertassinari / Banner.js
Last active December 30, 2018 21:46
Box Banner
import React from "react";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Avatar from "@material-ui/core/Avatar";
import Divider from "@material-ui/core/Divider";
import CssBaseline from "@material-ui/core/CssBaseline";
import SignalWifiOffIcon from "@material-ui/icons/SignalWifiOff";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import { unstable_Box as Box } from "@material-ui/core/Box";
import { palette, spacing, typography } from '@material-ui/system';
import styled from 'styled-components';
const Box = styled.div`${palette}${spacing}${typography}`;
// or import { unstable_Box as Box } from '@material-ui/core/Box';
<Box
color="primary.main"
bgcolor="background.paper"
fontFamily="h6.fontFamily"
@oliviertassinari
oliviertassinari / Banner.js
Created December 29, 2018 22:40
makeStyles
import React from "react";
import { makeStyles } from "@material-ui/styles";
import Grid from "@material-ui/core/Grid";
import CssBaseline from "@material-ui/core/CssBaseline";
import Paper from "@material-ui/core/Paper";
import Avatar from "@material-ui/core/Avatar";
import Divider from "@material-ui/core/Divider";
import SignalWifiOffIcon from "@material-ui/icons/SignalWifiOff";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
@oliviertassinari
oliviertassinari / metric.js
Created October 26, 2018 19:03
Isomorphic performance metric.
import warning from 'warning'
const times = new Map()
const implementations = {
mark: {
start: name => {
times.set(name, performance.now())
performance.mark(`metric_${name}_start`)
},
@oliviertassinari
oliviertassinari / RootRef.js
Last active January 6, 2018 11:32
Get a reference on the DOM element.
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
class RootRef extends React.Component {
componentDidMount() {
this.props.rootRef(ReactDOM.findDOMNode(this))
}
componentWillUnmount() {
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
function stylifier(higherOrderComponent) {
return Component => styles => {
function StyledComponent(props) {
const { classes, className, ...other } = props;
return <Component className={classNames(classes.root, className)} {...other} />;
}
// @flow weak
function now() {
return +new Date(); // timestamp in ms
}
// Count the number of events sent over the last period of time.
const count = {
minute: {
slot: 0,
@oliviertassinari
oliviertassinari / crashReporter.js
Last active September 10, 2020 15:02
Track offline errors with sentry.io and raven-js. https://github.com/getsentry/raven-js/issues/279
// @flow weak
import raven from 'raven-js';
import config from 'config';
const SENTRY_DSN = 'https://XXXX@app.getsentry.com/YYYY';
function sendQueue() {
const sentryOffline = JSON.parse(window.localStorage.sentryOffline);