Skip to content

Instantly share code, notes, and snippets.

View jsdaniell's full-sized avatar
💭
Good Insights!

José Daniel jsdaniell

💭
Good Insights!
134 followers · 107 following
View GitHub Profile
@jsdaniell
jsdaniell / mui-datatable-tags.js
Last active July 25, 2019 13:18
Mui-Datatable with fixed width and intern scroll, also pagination and tags on rows.
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
// Chip is the element used for decorate tags
import Chip from "@material-ui/core/Chip";
class Example extends React.Component {
render() {
@jsdaniell
jsdaniell / mui-datatable-filtering.js
Created July 25, 2019 13:21
Mui-Datatable with filter on columns, showing filtered properties on top.
import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import Chip from "@material-ui/core/Chip";
class Example extends React.Component {
render() {
const columns = [
{
name: "Name",
@jsdaniell
jsdaniell / cities.js
Created July 25, 2019 13:35
Mui-Datatable with possibilite of edit fields and checking buttons, also pagination.
import React from "react";
import PropTypes from "prop-types";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
class Cities extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
@jsdaniell
jsdaniell / mui-datatable-crud-rows.js
Created July 25, 2019 13:41
Mui-Datatable with delete, add and edit options for rows.
import React from "react";
import ReactDOM from "react-dom";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import TextField from "@material-ui/core/TextField";
import Switch from "@material-ui/core/Switch";
import MUIDataTable from "mui-datatables";
import Cities from "./cities";
class Example extends React.Component {
constructor(props) {
@jsdaniell
jsdaniell / mui-datatable-custom-action-by-columns.js
Created July 25, 2019 13:44
Mui-Datatable with selection on columns, and delete option.
import React from "react";
import ReactDOM from "react-dom";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import TextField from "@material-ui/core/TextField";
import Switch from "@material-ui/core/Switch";
import MUIDataTable from "mui-datatables";
import Cities from "./cities";
class Example extends React.Component {
render() {
@jsdaniell
jsdaniell / CustomFooter.js
Created July 25, 2019 13:48
Mui-Datatable with custom footer.
import React from "react";
import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import { withStyles } from "@material-ui/core/styles";
const defaultFooterStyles = {
};
class CustomFooter extends React.Component {
@jsdaniell
jsdaniell / mui-datatable-search.js
Created July 25, 2019 13:54
Mui-Datatable with search filter.
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
class Example extends React.Component {
state = {
searchText: "Computer"
};
render() {
@jsdaniell
jsdaniell / mui-datatable-server-side.js
Created July 25, 2019 14:03
Mui-Datatable server-side options.
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
class Example extends React.Component {
render() {
const columns = ["Name", "Title", "Location", "Age", "Salary"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
@jsdaniell
jsdaniell / mui-datatable-no-toolbar.js
Created July 25, 2019 14:05
Mui-Datatable without toolbar.
import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
class Example extends React.Component {
render() {
const columns = ["Name", "Title", "Location"];
const data = [
["Gabby George", "Business Analyst", "Minneapolis"],
@jsdaniell
jsdaniell / findFirstWay.js
Last active July 15, 2020 15:00
Using find(); to filter with javascript (First way)
const dataToFilter = ['Blue', 'White', 'Red', 'Yellow'];
let filteredBlueItem = dataToFilter.find(item => item === 'Blue');
console.log(filteredBlueItem)
// Blue
let filteredBlackItem = dataToFilter.find(item => item === 'Black');