How can I remove the border from a React table?

Question

I am using React Table for building Table in React JS. ( https://github.com/tannerlinsley/react-table ). I can't find how remove border in React Table. Please help me, thank you.

const tableStyle = {
  border: "none",
  boxShadow: "none"
};

class App extends React.Component{

  render(){
    const columns = [{
      Header: "Id",
      accessor: "id",
      headerClassName: 'headerTable',
      className: 'firstColumn',
    },
    {
      Header: "Name",
      accessor: "name",
      headerClassName: 'headerTable',
    },
    {
      Header: "Username",
      accessor: "username",
      headerClassName: 'headerTable',
    },
    {
      Header: "Email",
      accessor: "email",
      headerClassName: 'headerTable',
    }]

    return(
      <div>
        <ReactTable
        style={tableStyle}
        data = {this.state.users}
        columns = {columns}
        />
      </div>
    );
  }
}

table.css

.headerTable{
  background-color: #e8edf2;
  padding: 100px 0px;
  font-weight: 600;
  color: #1c2229;
  font-size: 1em;
}

This is my Table: Screenshoot Page

Answer 1

You can add a custom className prop to the Table and style it directly through css or add a style prop and add some inline styles. You can check out this section about styling and custom props section bellow this: https://github.com/tannerlinsley/react-table/tree/v6#styles

Answer 2

Here is and example taken from this code .

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const tableStyle = {
  border: "none",
  boxShadow: "none"
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData()
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          style={tableStyle}
          data={data}
          columns={[
            {
              Header: "First Name",
              accessor: "firstName",
              className: "sticky",
              headerClassName: "sticky"
            },
            {
              Header: "Last Name",
              id: "lastName",
              accessor: d => d.lastName
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Status",
              accessor: "status"
            },
            {
              Header: "Visits",
              accessor: "visits"
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

As you can see I defined an object called tableStyle that contains css properties and I passed it to the component ReactTable using the style prop

Answer 3

You can use the property getTdProps

 getTdProps={() => ({
    style: { border: `none` },
  })}