How to fix the column on the screen during the scroll? Using the Mui-datatables library, like datatables on doc. doc
In the mui-datatables there is a fixedSelectColumn property, but I was unable to select the column or configure the scroll.
My options :
const options = {
filter: true,
filterType: 'multiselect',
textLabels : TextLabels,
responsive: 'scroll',
fixedHeader: true,
tableBodyHeight: '100%',
selectableRows: false,
fixedSelectColumn: true,
};
The fixedSelectColumn prop is for the "selection" elements, i.e., the check boxes. I don't think the MUI-Datatables, as of this writing has props like this feature that you have linked pertaining to the jQuery datatables.
However, upon looking at this source code, we can see that some of the "fixed" columns utilize the CSS position: sticky property. So, one way to implement fixed columns is to style the cells & header cells as such:
const columns = [
{
name: "Name",
options: {
filter: true,
setCellProps: () => ({
style: {
whiteSpace: "nowrap",
position: "sticky",
left: "0",
background: "white",
zIndex: 100
}
}),
setCellHeaderProps: () => ({
style: {
whiteSpace: "nowrap",
position: "sticky",
left: 0,
background: "white",
zIndex: 101
}
})
}
},
...
Related
Is it possible to style the headers of the react-data-table-component? I tried this
columns: [
{
name: "Name",
selector: "name",
sortable: true,
style: {
background: "orange",
},
},
],
But it styles all the cells underneath that header, not the header itself.
Please let me know if there is documentation that I study this component API from.
I didn't find any mechanism to customize only the header cells, but you could style them with CSS selectors by passing an id in each column object and using the rdt_TableCol class
columns: [
{
name: "Name",
selector: "name",
id: "name",
sortable: true,
style: {
background: "orange",
},
},
],
and in a CSS file
[data-column-id="name"].rdt_TableCol {
background-color: orange;
}
https://codesandbox.io/s/style-header-cell-rdt-c1y35
of course, this method is susceptible to internal changes in the lib, make sure to fix the version and revisit the code if you upgrade the version
In the DataTable props you can assign a style to the customStyles property like so:
import { tableCustomStyles } from './tableStyle.jsx';
<DataTable
customStyles={tableCustomStyles}
/>
And then in the tableStyle.jsx file you can customize all properties of the table like this:
const tableCustomStyles = {
headCells: {
style: {
fontSize: '20px',
fontWeight: 'bold',
paddingLeft: '0 8px',
justifyContent: 'center',
backgroundColor: '#FFA500'
},
},
}
export { tableCustomStyles };
Here is the API reference: https://react-data-table-component.netlify.app/?path=/docs/api-custom-styles--page
And here is the styles.ts file from the repo that shows some of the properties you can manipulate: https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts
I have a React HorizontalBar component being used like so:
<div>
<HorizontalBar data={myData} options={myOptions} height={80} />
</div>
The options supplied are:
{
title: {
display: true,
text: 'My Title',
},
tooltips: { enabled: false },
hover: { mode: null },
legend: { display: false },
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0,
},
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
position: 'top',
gridLines: {
display: false,
},
ticks: {
beginAtZero: false,
min: 0,
max: 100,
sampleSize: 2,
callback: function (value: number, index: any, values: any) {
if (value == 0 || value == 100) {
return value;
}
return '';
},
},
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
};
Currently, this is what it looks like. I've added a background color on the canvas to show you what is going on:
Several things are wrong here that I would like some help on:
I cannot figure out why there is some mysterious padding on the left side of my canvas.
I would like to compress the distance between the gradient bar and the title but nothing I've tried in regards to adding padding options to the title attribute seem to work.
Finally, there is actually supposed to be a data label that is clipped because the size of the canvas. If I adjust the height attribute of the HorizontalBar to 140, it reveals:
Basically, what I want is that data label to be shown without everything so vertically stretched out (and without the y-axis line that has appeared in the second photo).
I want it to look something like this:
How do I achieve that?
Edit: I figured out the y-axis line display issue. I just have to add gridLines: { display: false } to my yAxes option and that removes it.
Title has its own padding, defaulting to 10.
yAxis can be hidden totally to remove the space (display: false).
tickMarkLength can be set to a negative number for xAxis grid lines to move those labels closer.
You should add padding to the bottom for the data label.
I am using react-tabulator for my app:
https://www.npmjs.com/package/react-tabulator
I want to format one of the column to have bold text.
I have tried formatter: "bold"
columns = () =>{
return (
[
{ title: "Title", field: "title1", headerSort: false, width: 180, formatter:"bold", hozAlign: "right" },
]}
I tried add a cssClass to the column
columns = () =>{
return (
[
{ title: "Title", field: "title1", headerSort: false, width: 180, cssClass: 'data-header, hozAlign: "right" },
]}
with definition of the class in styles.css
.data-header { font-weight: "bold" }
Nothing works.
Is it possible to also style a particular row in react-tabulator?
Thanks for the help, all the experts out there.
I found the solution, just for the benefit of others.
I need to configure the styles.css with the following for the cssCass to work:
.tabulator .data-header {
background-color: #ccc;
font-weight: bold;
}
Note that this is in react and using react-chartjs-2.
I have a simple bar graph with 3 datasets which has chartjs-plugin-datalabels enabled so I can see the labels just above the bars.
Turning on a dataset which was already hidden will animate the datalabel correctly along with the bar. But the problem is, when I hide a dataset, the labels do not update so they float statically where the bar height was before I hid that dataset.
What options do I need to set for this to update along with the bars?
<Bar
data={this.state.graphData}
legend={this.state.legendOptions}
options={{
plugins: {
datalabels: {
color: 'black',
padding: '0',
backgroundColor: 'white',
offset: 0,
formatter: value => this.moneyFormat(value),
align: 'end',
anchor: 'end',
display: context => context.dataset.hidden, // this needs to update ??
},
},
}}
/>
Legend options:
{
labels: {
fontSize: 18,
// onClick ??
},
}
Thanks for the help.
I am using react-google-charts in my reactjs application to create google line chart. I don't find any detailed document for this plugin.
I have few questions:
a) How to specify scaleStepWidth?
b) How to create pointDot in Line Chart?
To enable pointDot in line chart you have to just set "true" the points property option in configuration i-e
"pointsVisible: true"
Moreover you can find an example of line chart here
https://github.com/RakanNimer/react-google-charts/blob/HEAD/sandboxes/linechart/index.js
Other customization options if required then you can provide it in option property. for example just like below:
var options = {
//title: 'Graph',
//isStacked: true,
//legend: { position: 'top', maxLines: 3 },
width: chartwidth1 / 2 * 2,
height:450,
vAxis: {
gridlines: { count: 15 },
viewWindow: { min: -100000, max: 2000000},
},
//series: series,
chartArea: {
top: '10%', // set this to adjust the legend width
left: '8%', // set this eventually, to adjust the left margin
height: "80%",
width: "93%",
//width: "60%"
},
legend: { position: 'top', alignment: 'start' },
pointsVisible: true
}