I'm using this CSV to HTML table library, and it's working great. My problem is that, when i upload a csv that does not contain headers, the first row is displayed as the header row instead. I would like the header row displayed only if there is a header obviously. Any idea how?
This is the library i'm using:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter)}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
header="th"/>
And this is the css for 'th', if it is necessary:
th {
/*background-color: rgb(177, 176, 176); */
background-color: #222222;
color: white;
font-size: 13px;
font-weight: 400;
border-right: 1px solid #ddd;
height : 38px;
}
According to Wikipedia, CSV doesn’t have a standardized way to tell if the file has a header or not. You could of course come up with some way to detect the header’s presence, applicable to your data set.
For your convenience, the NPM package you are using has a prop called hasHeader. By setting it, you tell the component whether to render a header or not. The default value is true.
So, you can remove the header from the element simply by giving your <CsvToHtmlTable /> element a false as its hasHeader prop.
Like this:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter}
hasHeader={false}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
/>
Hope I could be of help! Ask away if you have any further doubts!
Related
I am trying to use tagged template literals along with styled components in VS code, like so:
const Component = styled.div`
margin: 0.5rem 0;
& label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
`
VS code displays everything inside the tag as a string (so all the code inside is one color). I see lots of tutorials online that render the content inside the tags like normal code (where you have different colors for the various elements) but I cannot figure out how to do that. Can someone help?
It looks like you are looking for - vscode-styled-components
Does anyone know why my project is like this when small tabed,
enter image description here
But when full screened like this:
enter image description here
My grid has the css of:
.table{
position: absolute;
margin-top: 37em;
margin-left: -42em;
min-width: 1015px;
}
Your style will depend on how it was created in your workflow, but you can try this class
const useStyles = makeStyles({
table: {
minWidth: 650,
},
});
or
.table {
min-width: 650px !important;
}
But this limitation on the size of the table may be related to the element or container that is related to the table.
You also do not need to declare the table's position since it is inherent to your parent and is not placing it in a specific place.
Could you show us how you are applying these classes in your code. You only showed us a small piece of code and did not present the application for that class.
You can also see class applications and table usage on the Material-UI page
https://material-ui.com/styles/basics/
It would be interesting to publish with your question the code where it is generating this situation, just seeing images is difficult to understand your problem
change your css like
.table{
width: 100%;
margin-top: 37em;
margin-left: 0;
}
I'm searching some ways to change the default code like this one _palette(highlight) but I'm unable to find which file I can change to make effect everywhere in my website.
&:hover {
border-bottom-color: transparent;
color: _palette(highlight) !important;
}
i found a file named _vars.scss, so here i can change every thing
I must remove page break while generating pdf by visual force pdf, but whatever I try with css page-break-inside: avoid;, page-break-before: avoid; etc. is not working.
I want to remove all page breaks making it a continuous pdf page, but I cannot figure it out.
Instead of using CSS styling for the APEX component, try a div tag around the APEX components you want to not be broken apart with style="page-break-inside:avoid;"
//div style="width:100%;page-break-inside:avoid;"> APEX ///div>
This css page-break-inside: avoid;, page-break-before: avoid; works only when you need to iterate on components. If you are using inline pre-built css into page then you have to check following css related to body tag. like this:
body { box-sizing: border-box; height: 11in; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; }
Here I am using width and height with auto value.
I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.
::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).
Here's the jsFiddle
It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.
I originally thought that it was sufficient to write each statement on a separate line.
I was mistaken.
So if I replace this code:
::-moz-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
..With this code:
::-moz-selection
{
text-shadow: none;
background: #333;
color: #fff;
}
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
.... bingo, it works.
FIDDLE
Support is also very good (for desktop): Caniuse
Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.
The following is documented on Mozilla Developer Network:
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).
The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.