How can I remove the border from a React table? - css

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:

Answer 1

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 2

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 3

You can use the property getTdProps
getTdProps={() => ({
style: { border: `none` },
})}