I have a table with columns and basically the data Im sending it, in some columns is another array. If its an array I need to split that into separate rows.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
const columns = [
{
title: "Classes",
dataIndex: "classes"
},
{
title: "Grades",
dataIndex: "grades"
},
{
title: "Credentials",
dataIndex: ["classMap", "Teacher with credentials"]
},
{
title: "No Credentials",
dataIndex: ["classMap", "Teacher no credentials"]
}
];
const data = [
{
key: "1",
classes: ["Chinese", "Italian"],
grades: ["98", "64"],
classMap: {
"Teacher with credentials": ["School board cred", "Teaching school"],
"Teacher no credentials": ["no credentials"]
}
}
];
ReactDOM.render(
<Table columns={columns} dataSource={data} pagination={false} />,
document.getElementById("container")
);
I made this example. If you look in codepen the data lets say for classes is in the same row. I need them to be split into separate rows
Related
I am loading a react-data-grid with a data source that is populated row by row (a row is added once a second). Once it gets to 9 rows it stops adding rows. I am also having another problem where the grid will not show up until I change the zoom on the screen. It is blank beforehand. Here is my grid element
import React, { Component } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
const columns = [
{ key: 'timeStamp', name: 'Date/Time' },
{ key: 'gpsAccuracyValue', name: 'GPS Accuracy' },
{ key: 'speedMph', name: 'Speed' },
{ key: 'battery', name: 'Battery' },
{ key: 'id', name: 'id' },
];
const rows = [
{ id: 0, title: 'Example' },
{ id: 1, title: 'Demo' }
];
class TestGrid extends Component {
render(){
return (
<div>
<DataGrid
columns={columns}
rows={this.props.data}
rowsCount={this.props.data.length}
minHeight={500}
/>
</div>
);
}
}
export default TestGrid;
I pass in the data like this
<TestGrid data={this.props.deviceData} />
CodeSandbox
Adding style={{ height:500 }} seems to have fixed a similar problem I was having and displays more than 9 rows.
In antd table, while rendering the data can i make a row as disabled.
so i have a dataSource so while rendering the table i need to make a table row as disabled based on the dataSource property.
In the dataSource there is a property of enabled, if its false i need to make the row as disabled kind of css.
first i thought of having a className but is there any inbuilt way, i dont want to have the selected kind of checkbox just plane a row to be disabled.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";
import "./styles.css";
function App() {
const dataSource = [
{
key: "1",
name: "Mike",
age: 32,
address: "10 Downing Street",
enabled: true
},
{
key: "2",
name: "John",
age: 42,
address: "10 Downing Street",
enabled: false
}
];
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
return (
<>
<Table dataSource={dataSource} columns={columns} />;
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Codesandbox
is there any way for this
Was able to find the solution
in App.js
<Table dataSource={dataSource} rowClassName={record => !record.enabled && "disabled-row"}
columns={columns} />;
and in css file
.disabled-row {
background-color: #dcdcdc;
}
I'm implementing ReactTable, the first example from its documentation, but each cell from the table goes to a new line:
ReactTable
This is my react table component:
import React, {PureComponent} from 'react';
import ReactTable from 'react-table';
export default class ExampleTable extends PureComponent {
render() {
const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
},{
name: 'Bla bla',
age: 29,
friend: {
name: 'RAra Ra',
age: 98,
}
}]
const columns = [{
Header: 'Name',
accessor: 'name' // String-based value accessors!
}, {
Header: 'Age',
accessor: 'age',
Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}, {
id: 'friendName', // Required because our accessor is not a string
Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
Header: props => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age'
}]
return <ReactTable
data={data}
columns={columns}
/>
}
}
And this is how I import the component:
import ExampleTable from './tables/example';
class TableView extends Component {
getExample() {
return (
<ExampleTable/>
)
}
render() {
return (
<div>
{this.getExample()}
</div>
);
}
}
Any idea why each cell is going to a new line?
Probably is something stupid I'm just starting with React.
Thanks in advance.
Found it!
It was something stupid, I wasn't importing the ReactTable css:
import "react-table/react-table.css";
Here is the code (live codesandbox):
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Tooltip } from "antd";
const columns = [
{
title: <Tooltip title="Address">A</Tooltip>,
dataIndex: "address",
sorter: (a, b) => a.address.length - b.address.length,
render: cell => <Tooltip title={cell}>{cell[0]}</Tooltip>
}
];
const data = [
{
key: "1",
address: "New York No. 1 Lake Park"
},
{
key: "2",
address: "London No. 1 Lake Park"
},
{
key: "3",
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
address: "London No. 2 Lake Park"
}
];
ReactDOM.render(
<Table columns={columns} dataSource={data} />,
document.getElementById("container")
);
When I hover table header, it shows plain tooltip instead of showing antd Tooltip:
However after disabling sorter the tooltip displays correctly:
How to make Tooltip and sorter work together?
Looks like sorter applies ant-table-column-sorters css class, which causes css to overlap the Tooltip.
A hacky way to fix this could be: apply title as a function, and override css:
const columns = [
{
title: () => <Tooltip title="Address">A</Tooltip>, // note it's func
// apply custom css class, so we can track it
className: "sorter-no-tooltip",
dataIndex: "address",
sorter: (a, b) => a.address.length - b.address.length,
render: cell => <Tooltip title={cell}>{cell[0]}</Tooltip>
}
];
and in index.css:
.sorter-no-tooltip .ant-table-column-sorters:before {
content: none !important;
}
Actually it looks like an framework issue, so it could be submitted.
Antd now supports a property for hiding sorter tooltip.
showSorterTooltip
This option is supported for Table as a whole or at column level.
This issue is fixed, you can update version to 3.12.2. And apply title as a function:
title: () => (your ReactNode),
I use react-bootstrap-table-next in this way:
import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
class App extends Component {
render() {
return (
<BootstrapTable keyField='id' data={ products } columns={ columns } />
);
}
}
export default App;
But, there is no border.
What I'm missing?
I had the exact same issue. It requires bootstrap CSS like others mentioned. In a typical react app, you'll want to install bootstrap via npm and then import the bootstrap CSS with this line.
import 'bootstrap/dist/css/bootstrap.min.css';
I'm the creator of react-bootstrap-table, please check https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html.
obviously, you are missing to add bootstrap css or there're some problem when you add bootstrap css.
Allen
import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
class App extends Component {
render() {
return (
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
striped
hover
condensed
/>
);
}
}
export default App;
Try this.
The bootstrap reference needs to be added to index.html as below:
https://getbootstrap.com/docs/4.0/getting-started/introduction/