为单元格中存在的 table 实现显示更多/显示更少:ReactJS
Implementing Show More/ Show Less for table present in a cell: ReactJS
我正在尝试为对象的嵌套数组实现 table,我想将其显示在该列的单元格中,就像具有 Show More/Show Less 功能的 table 一样。
沙盒:https://codesandbox.io/s/react-table-row-table-g8ws3
我也可以将这些值作为 table 数据,但我想通过显示更多/显示更少
动态添加此 table 数据
如果项目超过 2,则希望输出类似于 show more
,然后是 show less
的切换
我正在为这个应用程序使用 react table v6
+-----------+-----------+-----+-----------------+
| firstname | status | age | nested |
+-----------+-----------+-----+-----------------+
| Jack | Submitted | 14 | name value |
| | | | ----------- |
| | | | test1 NA |
| | | | |
| | | | test2 NA |
| | | | |
| | | | Show More/Less |
+-----------+-----------+-----+-----------------+
| Simon | Pending | 15 | name value |
| | | | |
| | | | ----------- |
| | | | |
| | | | test3 NA |
| | | | |
| | | | |
| | | | test4 Go |
| | | | |
| | | | Show More/Less |
+-----------+-----------+-----+-----------------+
import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
columns: [],
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
getData = () => {
const data = [
{
firstName: "Jack",
status: "Submitted",
nested: [
{
name: "test1",
value: "NA"
},
{
name: "test2",
value: "NA"
}
],
age: "14"
},
{
firstName: "Simon",
status: "Pending",
nested: [
{
name: "test3",
value: "NA"
},
{
name: "test4",
value: "Go"
}
],
age: "15"
}
];
this.setState({ data });
};
getColumns = () => {
const columns = [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Status",
accessor: "status"
},
{
Header: "Age",
accessor: "age"
},
{
Header: "Nested",
id: "nested",
accessor: data =>
data.nested.map(item => (
<div>
<span style={{ marginRight: "10px" }}>{item.name}</span>
<span>{item.value}</span>
</div>
))
}
];
this.setState({ columns });
};
render() {
return (
<>
<DataGrid
data={this.state.data}
columns={this.state.columns}
/>
</>
);
}
}
首先您需要在将数据设置为状态后决定要呈现的数据量,默认状态将是带有按钮 "show more" 的两个元素,因此,为此,您需要触发状态是按钮是否被点击,根据这个状态渲染的项目应该是,
要将按钮插入 table,您需要将其作为数组的最后一个子项插入,而无需仅填充列表末尾的按钮
对于嵌套列中的嵌套显示更多,我们需要类似的逻辑,但对于较小的组件,为此,我们需要将其分开以使其具有自己的状态
这是我的尝试:
import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
import Nested from "./Nested.js";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
data: [],
columns: [],
clicked: false,
text: "show more"
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
onClick = () => {
this.setState(
prevState => {
const text = !prevState.clicked ? "show less" : "show more";
return {
clicked: !prevState.clicked,
text
};
},
() => this.formatData()
);
};
getData = () => {
const data = [
{
firstName: "Jack",
status: "Submitted",
nested: [
{
name: "test1",
value: "NA"
},
{
name: "test2",
value: "NA"
},
{
name: "test5",
value: "NA"
}
],
age: "14"
},
{
firstName: "Simon",
status: "Pending",
nested: [
{
name: "test3",
value: "NA"
},
{
name: "test4",
value: "Go"
},
{
name: "test6",
value: "NA"
},
{
name: "test7",
value: "NA"
}
],
age: "15"
},
{
firstName: "Simon2",
status: "Pending",
nested: [
{
name: "test3",
value: "NA"
},
{
name: "test4",
value: "Go"
}
],
age: "15"
}
];
this.setState(() => ({ data }), () => this.formatData());
};
getColumns = () => {
const columns = [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Status",
accessor: "status"
},
{
Header: "Age",
accessor: "age"
},
{
Header: "Nested",
id: "nested",
accessor: data => <Nested data={data.nested} />
}
];
this.setState({ columns });
};
formatData = () => {
const clickBtn = {
firstName: <button onClick={this.onClick}>{this.state.text}</button>
};
if (this.state.clicked) {
const items = [...this.state.data, clickBtn];
this.setState({ items });
} else {
const items = [...this.state.data.slice(0, 2), clickBtn];
this.setState({ items });
}
};
render() {
return (
<>
<DataGrid data={this.state.items} columns={this.state.columns} />
</>
);
}
}
render(<App />, document.getElementById("root"));
和嵌套文件:
import * as React from "react";
class Nested extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
data: [],
clicked: false,
text: "show more"
};
}
componentDidMount() {
this.setState(() => ({ data: this.props.data }), () => this.formatData());
}
onClick = () => {
this.setState(
prevState => {
const text = !prevState.clicked ? "show less" : "show more";
return {
clicked: !prevState.clicked,
text
};
},
() => this.formatData()
);
};
formatData = () => {
console.log(this.state.data);
const clickBtn = {
type: "btn",
component: <button onClick={this.onClick}>{this.state.text}</button>
};
if (this.state.clicked) {
const items = [...this.state.data, clickBtn];
this.setState({ items });
} else {
const items = this.state.data && [
...this.state.data.slice(0, 2),
clickBtn
];
this.setState({ items });
}
};
render() {
const { items } = this.state;
return (
<>
{items &&
items.map(item =>
item.type === "btn" ? (
!!item.component && item.component
) : (
<div>
<span style={{ marginRight: "10px" }}>{item.name}</span>
<span>{item.value}</span>
</div>
)
)}
</>
);
}
}
export default Nested;
我正在尝试为对象的嵌套数组实现 table,我想将其显示在该列的单元格中,就像具有 Show More/Show Less 功能的 table 一样。
沙盒:https://codesandbox.io/s/react-table-row-table-g8ws3
我也可以将这些值作为 table 数据,但我想通过显示更多/显示更少
动态添加此 table 数据如果项目超过 2,则希望输出类似于 show more
,然后是 show less
我正在为这个应用程序使用 react table v6
+-----------+-----------+-----+-----------------+
| firstname | status | age | nested |
+-----------+-----------+-----+-----------------+
| Jack | Submitted | 14 | name value |
| | | | ----------- |
| | | | test1 NA |
| | | | |
| | | | test2 NA |
| | | | |
| | | | Show More/Less |
+-----------+-----------+-----+-----------------+
| Simon | Pending | 15 | name value |
| | | | |
| | | | ----------- |
| | | | |
| | | | test3 NA |
| | | | |
| | | | |
| | | | test4 Go |
| | | | |
| | | | Show More/Less |
+-----------+-----------+-----+-----------------+
import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
columns: [],
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
getData = () => {
const data = [
{
firstName: "Jack",
status: "Submitted",
nested: [
{
name: "test1",
value: "NA"
},
{
name: "test2",
value: "NA"
}
],
age: "14"
},
{
firstName: "Simon",
status: "Pending",
nested: [
{
name: "test3",
value: "NA"
},
{
name: "test4",
value: "Go"
}
],
age: "15"
}
];
this.setState({ data });
};
getColumns = () => {
const columns = [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Status",
accessor: "status"
},
{
Header: "Age",
accessor: "age"
},
{
Header: "Nested",
id: "nested",
accessor: data =>
data.nested.map(item => (
<div>
<span style={{ marginRight: "10px" }}>{item.name}</span>
<span>{item.value}</span>
</div>
))
}
];
this.setState({ columns });
};
render() {
return (
<>
<DataGrid
data={this.state.data}
columns={this.state.columns}
/>
</>
);
}
}
首先您需要在将数据设置为状态后决定要呈现的数据量,默认状态将是带有按钮 "show more" 的两个元素,因此,为此,您需要触发状态是按钮是否被点击,根据这个状态渲染的项目应该是, 要将按钮插入 table,您需要将其作为数组的最后一个子项插入,而无需仅填充列表末尾的按钮
对于嵌套列中的嵌套显示更多,我们需要类似的逻辑,但对于较小的组件,为此,我们需要将其分开以使其具有自己的状态
这是我的尝试:
import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";
import Nested from "./Nested.js";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
data: [],
columns: [],
clicked: false,
text: "show more"
};
}
componentDidMount() {
this.getData();
this.getColumns();
}
onClick = () => {
this.setState(
prevState => {
const text = !prevState.clicked ? "show less" : "show more";
return {
clicked: !prevState.clicked,
text
};
},
() => this.formatData()
);
};
getData = () => {
const data = [
{
firstName: "Jack",
status: "Submitted",
nested: [
{
name: "test1",
value: "NA"
},
{
name: "test2",
value: "NA"
},
{
name: "test5",
value: "NA"
}
],
age: "14"
},
{
firstName: "Simon",
status: "Pending",
nested: [
{
name: "test3",
value: "NA"
},
{
name: "test4",
value: "Go"
},
{
name: "test6",
value: "NA"
},
{
name: "test7",
value: "NA"
}
],
age: "15"
},
{
firstName: "Simon2",
status: "Pending",
nested: [
{
name: "test3",
value: "NA"
},
{
name: "test4",
value: "Go"
}
],
age: "15"
}
];
this.setState(() => ({ data }), () => this.formatData());
};
getColumns = () => {
const columns = [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Status",
accessor: "status"
},
{
Header: "Age",
accessor: "age"
},
{
Header: "Nested",
id: "nested",
accessor: data => <Nested data={data.nested} />
}
];
this.setState({ columns });
};
formatData = () => {
const clickBtn = {
firstName: <button onClick={this.onClick}>{this.state.text}</button>
};
if (this.state.clicked) {
const items = [...this.state.data, clickBtn];
this.setState({ items });
} else {
const items = [...this.state.data.slice(0, 2), clickBtn];
this.setState({ items });
}
};
render() {
return (
<>
<DataGrid data={this.state.items} columns={this.state.columns} />
</>
);
}
}
render(<App />, document.getElementById("root"));
和嵌套文件:
import * as React from "react";
class Nested extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
data: [],
clicked: false,
text: "show more"
};
}
componentDidMount() {
this.setState(() => ({ data: this.props.data }), () => this.formatData());
}
onClick = () => {
this.setState(
prevState => {
const text = !prevState.clicked ? "show less" : "show more";
return {
clicked: !prevState.clicked,
text
};
},
() => this.formatData()
);
};
formatData = () => {
console.log(this.state.data);
const clickBtn = {
type: "btn",
component: <button onClick={this.onClick}>{this.state.text}</button>
};
if (this.state.clicked) {
const items = [...this.state.data, clickBtn];
this.setState({ items });
} else {
const items = this.state.data && [
...this.state.data.slice(0, 2),
clickBtn
];
this.setState({ items });
}
};
render() {
const { items } = this.state;
return (
<>
{items &&
items.map(item =>
item.type === "btn" ? (
!!item.component && item.component
) : (
<div>
<span style={{ marginRight: "10px" }}>{item.name}</span>
<span>{item.value}</span>
</div>
)
)}
</>
);
}
}
export default Nested;