React Data Table Component - Header row not showing full text - javascript

so I am using an npm package called react-data-table-component. A problem that I am having with this is that I can't adjust the width enough to display the full header text, as you can see here:
Here is the custom styling that I am using with this data table:
const CustomStyle = {
noData: {
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
},
},
rows: {
style: {
zIndex: 2,
minHeight: '30px !important', // override the row height
fontSize: '14px',
whiteSpace: 'pre',
},
},
table: {
style: {
zIndex: 1,
},
},
headRow: {
style: {
minHeight: '40px',
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderBottomWidth: '2px',
},
},
headCells: {
style: {
fontSize: '16px',
justifyContent: 'left',
wordWrap: 'breakWord',
},
},
subHeader: {
style: {
minHeight: '40px',
},
},
pagination: {
style: {
minHeight: '40px',
},
pageButtonsStyle: {
borderRadius: '50%',
height: '40px',
width: '40px',
padding: '8px',
margin: 'px',
cursor: 'pointer',
},
},
};
Here is the width setting that I am using for each column:
const columns = [
{
name: 'Action',
selector: row => row['CASE_ID'],
width: '6%',
maxWidth: 'auto',
cell: row => {
return (
<div>
<Row>
<Col className="ml-3">
<Link to={{ pathname: "/wlmonitoring/user-case-wl", caseID: row.CASE_ID, cifID: row.NO_CIF }}>
<img alt="" src={editIcon} className="edit-icon" />
</Link>
</Col>
</Row>
</div>
);
},
},
{
name: 'Case ID',
selector: row => row['CASE_ID'],
width: '7%',
maxWidth: 'auto',
cell: row => {
return (
"WMC" + row.CASE_ID
)
}
},
{
name: 'Created Date',
selector: row => row['AUDIT_DATE_CREATED'],
width: '10%',
maxWidth: 'auto',
sortable: true,
cell: row => {
return (
moment(row.AUDIT_DATE_CREATED).format(dateFormat)
)
}
},
Currently I am using percentage to define the width, but I tried setting the exact width in pixel, but that would cause the last header to protrude out of the table like so:
If anyone can help me figure out what the exact issue is I would really appreciate it.

The accepted answer didn't work for me. What did was placing the title inside a div, that way the component will not try to shorten in.
Eg from:
{
name: 'Case ID',
...
}
To:
{
name: <div>Case ID</div>,
...
}

Just add this style to your App.css or App.scss and do hard refresh ctrl+shift+R
.lnndaO {
white-space: pre-line !important;
}

Related

How to align Text in React Native

I'm trying to style my work, I've included a slug description now and simply hardcoded it in whilst I try to make it look better. I'm having two problems that I'm looking to resolve. I can't get the slug text to align between one another. And the second issue is that when it is took long it wraps and distorts everything, I'd rather it reduced down and showed an ellipsis (...) are these things achieveable?
import { StyleSheet, Text, View, FlatList, SafeAreaView, Image } from 'react-native'
export default function App() {
const present = [{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('../assets/present.jpeg')
},
{
id:2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('../assets/present2.jpeg')
},
{
id:3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('../assets/present3.jpeg')
},
{
id:4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('../assets/present4.jpeg')
},
{
id:5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('../assets/present5.jpeg')
},
];
const onePresent = ( { item } ) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source = {item.image} style={styles.avatarContainer}/>
</View>
<Text style={styles.name}> {item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
)
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>
}
const itemSeperator = () => {
return <View style = {styles.seperator}/>
}
return (
<SafeAreaView >
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data = { present }
renderItem = { onePresent }
ItemSeperatorComponent = { itemSeperator }
ListEmptyComponent = { <Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug:{
transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name:{
transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline:{
color:'#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex:1,
flexDirection:'row',
alignItems:'center',
paddingVertical:13,
},
avatarContainer:{
backgroundColor:'#D9D9D9',
borderRadius:100,
height:89,
width:89,
justifyContent:'center',
alignItems: 'center',
margin:10,
},
listHeader:{
height:55,
alignItems:'center',
justifyContent: 'center'
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
}
})
The textAlign prop is what I think you want. However I noticed you were using transform to position the text in your view and I found a way to layout your components so that you dont have to do so (demo).
import {
StyleSheet,
Text,
View,
FlatList,
SafeAreaView,
Image,
} from 'react-native';
export default function App() {
const present = [
{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('./assets/snack-icon.png'),
},
];
const onePresent = ({ item }) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source={item.image} style={styles.avatarContainer} />
</View>
<View style={styles.slug}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
</View>
);
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>;
};
const itemSeperator = () => {
return <View style={styles.seperator} />;
};
return (
<SafeAreaView>
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data={present}
renderItem={onePresent}
ItemSeperatorComponent={itemSeperator}
ListEmptyComponent={<Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug: {
// transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name: {
// transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline: {
width: '100%',
color: '#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 13,
},
avatarContainer: {
backgroundColor: '#D9D9D9',
borderRadius: 100,
height: 89,
width: 89,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
listHeader: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
},
});

how we can put text inside circle in highchart networkgraph?

Folks, I am using highcahrt api in react js. I want the inside text should horizontally and vertically align with the circle. I Tried This Code But nothing happen.. heightchart show the circles as a svg.. is it possible its become div? then i can arrange the text..
text look very bad now see the result
dataLabels: {
enabled: true,
inside: true,
// format: '{point.name}',
useHTML: true, // false,
align: 'center',
textAlign: "center",
// verticalAlign: 'center',
formatter: (item) => {
const name = title.replaceAll("/","/<br />");
return name;
},
filter: {
property: 'radius',
operator: '>',
value: 35, // 25,// 35
},
style: {
color: 'white',
align: 'center',
textOutline: 'none',
fontWeight: 'bold',
fontSize: '10px', // '10px',
whiteSpace: 'wrap',
width: "50px",
height: "100px",
padding: "2px",
textAlign: "center",
wordBreak: "break-word",
},
y: 20
},

How to remove space below semi donut chart in Apexcharts?

I am trying to show semi donut chart using Apexcharts. I want it to be responsive so I've set its height and width to auto, but it is still taking so much of extra space after donut and it's effecting my whole dashboard. Any idea how to remove this extra space?
Here's my current chart configuration.
const options: ApexOptions = {
chart: {
type: "donut",
height: "auto",
width: "auto",
parentHeightOffset: 0,
sparkline: {
enabled: true,
},
redrawOnWindowResize: true,
redrawOnParentResize: true,
events: {
mounted: chart => {
chart.windowResizeHandler()
},
},
},
stroke: {
width: 0,
},
labels: labels,
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
donut: {
size: "65%",
background: "transparent",
labels: {
show: true,
name: {
show: false,
},
},
},
},
},
grid: {
padding: {
left: 0,
right: 0,
bottom: 0,
},
},
dataLabels: {
enabled: false,
},
legend: {
show: false,
},
}
return (
<div className="chart" style={{ height: "auto", width: "auto" }}>
<ReactApexChart options={options} series={series} type="donut" />
</div> )
I think, specifying the height and width in the parent container will help you in your case
like this.
<div className="chart" style={{ height: "50px", width: "50px" }}>
<ReactApexChart options={options} series={series} type="donut" height="100%" width="100%" />
</div>
and remove height and width form you chart Options
chart: {
type: "donut",
parentHeightOffset: 0,
sparkline: {
enabled: true,
},
...
}

Creating a React Table with functional Components in React.js

I'm new to this coding world and trying to learn Javascript and its frameworks. I'm trying to create a React table with functional components. I am able to create the table fine but the data is not rendering, tried using the fetch hook method. Can anyone help me out with something else ? Here is the code:
import React, { useState, useEffect } from "react";
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import '../components/mystyle.css'
const FunctionalComponent = () => {
const [employees, setEmployees] = useState({});
const [isError, setErrors] = useState(false)
useEffect(() => {
async function fetchData() {
const res = await fetch("http://localhost:7000/employees");
res
.json()
.then(res => setEmployees({employeeDetails: res}))
.catch(err => setErrors(err));
}
fetchData();
}, []);
useEffect(() => {
async function fetchData() {
const resctc = await fetch("http://localhost:7000/employee/ctc");
resctc
.json()
.then(resctc => setEmployees({totalCtc: resctc}))
.catch(err => setErrors(err));
}
fetchData();
}, []);
const columns = [
{
Header: "EmployeeID",
accessor: "EmployeeId",
style: {
textAlign: 'center',
}
},
{
Header: "Name",
accessor: "name",
style: {
textAlign: 'center'
}
},
{
Header: "Project",
accessor: "Project",
style: {
textAlign: 'center'
}
},
{
Header: "Experience",
accessor: "experience",
style: {
textAlign: 'center'
}
},
{
Header: "Salary",
accessor: "salary",
style: {
textAlign: 'center'
}
},
{
Header: "DateofJoining",
accessor: "DOJ",
style: {
textAlign: 'center'
}
},
{
Header: "Blood Group",
accessor: "Blood group",
style: {
textAlign: 'center'
}
},
{
Header: "Actions",
Cell: props => {
return (
<button style={
{
backgroundColor: 'white',
color: "red",
textAlign: 'center'
}
}
>
View
</button>
)
},
width: 100,
maxWidth: 100,
minWidth: 100,
}
]
return (
<div>
<div style={{ display: 'flex',
justifyContent: "space-between",
maxWidth: '100',
maxHeight: '100',
padding: '20px',
backgroundColor: '#fefefe'
}}>
<img src={Logo} alt={Logo} maxWidth='30px' />
</div>
<div class="container-fluid" >
<div style={
{
display: 'flex',
justifyContent: "space-between",
margin: '10px'
}
}>
<div style={
{
maxWidth: '100',
fontSize: '2vw',
color: 'red'
}
}>Employee List</div>
<div style={
{
background: 'linear-gradient(to right, #f0f0f0 50%, blue 50%)',
textAlign: 'center',
maxWidth: '100',
border: '1px solid blue',
borderRadius: '35px',
padding: '10px',
}
}>
<span style={
{
color: 'blue',
fontSize: '16px',
padding: '5px 24px',
borderRadius: '35px'
}
}
>Total CTC</span>
<span style={
{ color: 'white', fontSize: '16px', padding: '5px 24px', borderRadius: '35px' }
}
>{employees.totalCtc}/-</span>
</div>
</div>
<ReactTable columns={columns} data={employees.employeeDetails} defaultPageSize={10}></ReactTable>
</div>
<div>
<span>{JSON.stringify(employees)}</span>
<hr />
<span>Is Error: {JSON.stringify(isError)}</span>
</div>
</div>
)
}
export default FunctionalComponent;

React Table : How do I total (sum) values to each of the holeOne thru holeNine and display the sum as a value in out: 41?

Trying total the values of each of the holes and display the total in out:
out: S{holesSum},
returns the Object
export const data = [
{
id: 2,
name: 'Tiger Woods',
holeOne: 4,
holeTwo: 5,
holeThree: 4,
holeFour: 5,
holeFive: 5,
holeSix: 4,
holeSeven: 5,
holeEight: 5,
holeNine: 4,
out: // want to sum to values of holeOne thru holeNine
}
]
import ReactTable from 'react-table';
import React, { Component } from 'react';
import { data } from './data';
const columns = [
{
Header: 'Place',
accessor: 'eventPosition',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 60
},
{
Header: 'Player',
accessor: 'name',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 200
},
{
Header: '1',
accessor: 'holeOne',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '2',
accessor: 'holeTwo',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '3',
accessor: 'holeThree',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '4',
accessor: 'holeFour',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '5',
accessor: 'holeFive',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '6',
accessor: 'holeSix',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '7',
accessor: 'holeSeven',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '8',
accessor: 'holeEight',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: '9',
accessor: 'holeNine',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
},
{
Header: 'Out',
accessor: 'out',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50
}
];
export default class ReactTableComponent extends Component {
render() {
return (
<div style={{ padding: '50px' }}>
<ReactTable
manual
minRows={0}
pageSize={1}
data={data}
columns={columns}
pages={0}
showPagination={true}
/>
</div>
);
}
}
({holeOne}, ... {holeNine}).reduce
From the docs, you can customize your Cell.
{
Header: 'Out',
accessor: 'out',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50,
Cell: row => {
console.log(data);
let columns_to_sum = ["holeOne","holeTwo" , "holeThree" , "holeFour" , "holeFive" , "holeSix" , "holeSeven" , "holeEight" , "holeNine"];
let result = 0;
Object.keys(data[row.index]).map(key =>{
if(columns_to_sum.includes(key)){
result += data[row.index][key]
}
})
return result;
}
}
Demo
This is the perfect example for the reduce function like this:
const columns_to_sum = ["holeOne","holeTwo" , "holeThree" , "holeFour" , "holeFive" , "holeSix" , "holeSeven" , "holeEight" , "holeNine"];
{
Header: 'Out',
accessor: 'out',
headerStyle: { whiteSpace: 'unset' },
style: { whiteSpace: 'unset' },
maxWidth: 50,
Cell: row => rowData => columns_to_sum.reduce((sum, hole) => sum + rowData.row[hole] || 0,0)
}
Using reduce removes the need for a variable to be updated outside and encapsulates the function nicely. You also do not generate an array like with map, which gets discarded, so this approach is also faster.
Here is the demo.

Categories