Nextjs React Table

Pro Component

gcal/outlook like calendar component

We have created the design of the React Big Calendar. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.

Styles

You will find the styles for this component in assets/scss/nextjs-material-dashboard-pro/plugins/_plugin-react-table.scss.

NOTICE

On the last column of this component we’ve added text-align: left; because we’ve considered the last column to be reserved for the actions of the table. If you wish to change this behavior you need to change the styling found in the file below.

The components/ReactTable/ReactTable.js is just a demo table, and it comes as is. We do not offer support for adding or deleting new code or the demo code. If you wish to add new hooks to our demo component, you can do so. Or, you can duplicate our component and create a new one based on our.

For our demo component, we’ve used the following three examples from the react-table repository:

Example

Unfortunately, we are experiencing some difficulties with our live preview docs, and for some reason, the code demo does not work for this plugin and components. Please check them out here.

import React from "react";
// @material-ui/icons
import Dvr from "@material-ui/icons/Dvr";
import Favorite from "@material-ui/icons/Favorite";
import Close from "@material-ui/icons/Close";

// core components
import Button from "components/CustomButtons/Button.js";
import ReactTable from "components/ReactTable/ReactTable.js";

import { dataTable } from "variables/general.js";

function ReactTables({ ...props }) {
  return (
      <ReactTable
        data={dataTable.dataRows.map((prop, key) => {
          return {
            id: key,
            name: prop[0],
            position: prop[1],
            office: prop[2],
            age: prop[3],
            actions: (
              // we've added some custom button actions
              <div className="actions-right">
                {/* use this button to add a like kind of action */}
                <Button
                  justIcon
                  round
                  simple
                  onClick={() =>
                    alert("You've pressed the like button on colmun id: " + key)
                  }
                  color="info"
                  className="like"
                >
                  <Favorite />
                </Button>{" "}
                {/* use this button to add a edit kind of action */}
                <Button
                  justIcon
                  round
                  simple
                  onClick={() =>
                    alert("You've pressed the edit button on colmun id: " + key)
                  }
                  color="warning"
                  className="edit"
                >
                  <Dvr />
                </Button>{" "}
                {/* use this button to remove the data row */}
                <Button
                  justIcon
                  round
                  simple
                  onClick={() =>
                    alert(
                      "You've pressed the delete button on colmun id: " + key
                    )
                  }
                  color="danger"
                  className="remove"
                >
                  <Close />
                </Button>{" "}
              </div>
            )
          };
        })}
        columns={[
          {
            Header: "Name",
            accessor: "name"
          },
          {
            Header: "Position",
            accessor: "position"
          },
          {
            Header: "Office",
            accessor: "office"
          },
          {
            Header: "Age",
            accessor: "age"
          },
          {
            Header: "Actions",
            accessor: "actions",
            sortable: false,
            filterable: false
          }
        ]}
      />
  );
}
export default ReactTables;

Props

If you want to see more examples and properties please check the official react-table Documentation.

You can also check the Official Github Repository.