Как я могу удалить границу из таблицы React? - PullRequest
Новая
       35

Как я могу удалить границу из таблицы React?

0 голосов
/ 21 июня 2019

Я использую React Table для построения таблицы в React JS. (https://github.com/tannerlinsley/react-table). Я не могу найти, как убрать границу в React Table. Пожалуйста, помогите мне, спасибо. 

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;
}

Это моя таблица: Страница скриншота

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

Вот и пример взят из этого кода . 

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"));

Как видите, я определил объект с именем tableStyle, который содержит свойства css, и передал его компоненту ReactTable, используя стиль prop

0 голосов
/ 21 июня 2019

Вы можете добавить пользовательскую реквизит className в таблицу и стилизовать ее напрямую через css или добавить реквизит стиля и добавить несколько встроенных стилей.Вы можете проверить этот раздел о стайлинге и разделе пользовательских реквизитов ниже: https://github.com/tannerlinsley/react-table/tree/v6#styles

...