I have a react-virtualized Table with some lengthy column headers, and want the column headers to wrap rather than trail off with an ellipsis. Anyone know how to make this happen?
For reference, here's some example code:
makeTable = <AutoSizer>
{({ width, height }) => (
<Table ref={this.setTableRef.bind(this)}
width={width}
height={height}
headerHeight={20}
rowHeight={this._rowHeight.bind(this)}
rowCount={this.props.reportRows.length}
rowGetter={this._rowGetter.bind(this)}
rowClassName={this._rowClassName.bind(this)}
>
<Column
label='Super Long Column Header Name of Longness'
dataKey='testCase'
width={150}
flexGrow={1}
cellRenderer={this._testCaseCellRenderer.bind(this)}
/>
[truncated the code above]
As you can see, it's the label I need to wrap, but no style I apply is working, be it in the Column or the css. Help? Thanks!
I assume you are including the styles as specified in react-virtualized? For context, what is applying the style is this line in their stylesheet.
It looks like the className is hard injected when loading default render so you have to either override this style with your own style that is of the same name, define your own style that somehow can apply a style to this element with a higher CSS specificity or, overkill, define your own headerRenderer which Column provides a way to do.
Just an FYI -- naturally react-virtualized has a lot of its components in a certain way and the responsive aspect of it is true as well. I would recommend playing around in their playground via the CSS in Chrome Dev tools so if removing the wrap behaves as expected and it doesn't, you can see what you may need to change.
Related
I have a question about paginationElement in Tabulator.
As per tabulator documentation, i created a DIV and used paginationElement in Table setup to render the paginator in the DIV. Well, it works. But with a drawback, no styling works, no colors, no highlighting of current page. So it is kinda inconvenient.
Is there a way to resolve this?
Otherwise, i am really happy with Tabulator! Thank you for the great work!
Cheers
You might have to style the pagination footer by css as the location of it has been changed by paginationElement.
This is because all of the table styling is based around the pagination element being inside the table.
Moving it outside the table will mean you will need to apply the styles yourself. The classes that denote that you are on the current page etc will still be applied, you just need to tell the browser how to style them.
The Styling Documentation contains more information on the classes used by tabulator and how to style the table
Is it possible to set a x-scrolling in react-virtualized? I have a table with a fixed width, and more columns to display than I got space in my table, so I need a x-scrollinig. In my tests if i did it, the table just shrinked up and did just display '...''s for content if the table runs out of space.
Intro paragraph for react-virtualized Table docs (emphasis added):
Table component with fixed headers and windowed rows for improved
performance with large data sets. This component expects explicit
width and height parameters. Table content can scroll vertically but
it is not meant to scroll horizontally.
You might be able to hack it, but it isn't meant to support horizontal scrolling so it probably won't work. Consider using Grid or MultiGrid instead if this is a requirement for your app.
I was struggling with this myself for a while. I did it by by setting the width of the table to width={Object.keys(rows[0]).length*150} and set each column min width to 150 (or whatever you choose just make sure it is the same in your table).
Then wrap it in a Paper and give it a width and overflowX:'auto'
something like this:
const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
export default function DataPreview(props) {
const rows = [{ One: 'one', Two: 'Two',Three: 'Three',Four:'Four', Five:'Five', Six:'Six'}]
return (
<Paper style={{ height: 400, width:700, overflowX: 'auto'}}>
<VirtualizedTable
width={Object.keys(rows[0]).length*150}
rowCount={rows.length}
rowGetter={({ index }) => rows[index]}
columns={Object.keys(rows[0]).map(head=>{return(
{
minWidth:150,
label:head,
dataKey:head
}
)})}
/>
</Paper>
);
}
Building on bvaughn's accepted answer, the hack for a horizontally scrollable table could look something like this, however, beware of the following caveats that come with this hack:
Your overflowing Table columns will not be virtualized
The scrolling focus gets captured by the wrapper's x-axis scrolling and you will need to click within the internal Table component to refocus and regain y-axis scrolling. This is incredibly frustrating to use especially on mobile devices.
I have a resource in OrchardCMS that I'm displaying through a number of smaller shapes (so that I can adjust the layout order in placement.info).
In the Driver I am returning these parts through the use of returning a Combined(ContentShape(...), ContentShape(...), ContentShape(...)) etc
However I would like the HTML of each of the smaller shapes to appear within an HTML wrapper (such as a div or article or suchlike)
How do I go about doing this?
Thanks
I understand what you are trying to achieve but it isn't really a feasible scenario. A wrapper is applied to a shape and combined returns several shapes. As you say, each shape has an entry in the placement.info file, so you could easily have these shapes within different content zones or zones spread around your page, where a wrapper would just not work. Make sense?
The answer is probably that you need to create an override for the content view of the content type you are displaying and add the stuff you want to put in your wrapper in there. e.g. if your content type is called MyType and the displayed type was detail, your view would be called Content-MyType.Detail.cshtml.
Do you mean an Orchard wrapper (whole new cshtml file), or just a HTML element?
In the latter case you can do in your part view:
#{
var tag = Tag(Model, "article");
}
#tag.StartElement
stuff
#tag.EndElement
If you want to wrap a (common) wrapper around your elements, you can do the following in your placement.info:
<Place Parts_MyPart="Content:1;Wrapper=MyWrapper" />
<Place Parts_MyOtherPart="Content:2;Wrapper=MyWrapper" />
And create a MyWrapper.cshtml:
<article>
#Display(Model.Child)
</article>
Setup:
I am using Orchard CMS 1.6.
I have a site where I need to be able to set the background color of the whole page. Ie, I need to style the body tag.
I could use the LayoutSelector module and have distinct layouts. However, the only difference in each layout is that the background-color rule for the body tag is different. So it seems a very un-dry way of doing things.
I can't find any way to make Vandelay.Classy add a distinct id or class to the body tag (it adds, as I understand it) an id or a class to the outer tag of a content type. In my case, that isn't the body tag.
So that is no good, I really do need to customize the body tag.
How to do this?
Note:
I need 3 different background colors. I also have a two column layout and a three column layout. [I use (a modified version of) the layoutSelector module to achieve this.] So to have 3 different colors of background, and I used layouts to achieve this, I would need 6 different layouts: TOTAL overkill.
There must be a better way...
From any cshtml file, you should be able to access the Layout shape. From pretty much anywhere else, you can still get to the Layout shape through WorkContextAccessor. Once you have a reference to the Layout shape, you can do Layout.Classes.Add("the-class-you-want").
The validator at http://jigsaw.w3.org/css-validator/ says that the value 'text' for 'user-select' is not valid. For a css rule with this code in it:
user-select: text;
the validator says:
text is not a user-select value : text text
Presumably this is because of this behavior, specified at (the outdated) http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select:
This property is not inherited, but it does affect children in the
same way that display: none does, it limits it. That is if an element
is user-select: none, it doesn't matter what the user-select value is
of its children, the element's contents or it's childrens contents
cannot be selected.
Also, I only see the attribute value 'text' specified in that out-of-date css3 doc from w3.org:
http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
and not in the latest one: http://www.w3.org/TR/css3-ui/
Additionally, searching 'whatwg.org' yields nothing.
Any ideas if 'user-select: text' is valid css3, and if not, what should be used instead?
This would be used, for example, when overriding 'user-select: none' rules applied to containers of text and ancestor containers.
You are getting this wrong. user-select:text doesn't mean it would select text only. It's default value of user-select property. W3C describe it this way:
The element's contents follow a standard text content selection model.
And Also MDN syas something same:
-moz-none The text of the element and sub-elements cannot be selected,
but selection can be enabled on sub-elements using
-moz-user-select:text .
So I don't think this should prevent selecting images or boxes.
As far as I know user-select:text is useful when you have user-select:none for most or all of your elements and you have a textbox or text area that is kind of output and you want it be selectable for copying and pasting.
It seems if you use -webkit- prefix it works for me. I'm sure it works with -moz- prefix too. Test this fiddle in your browser. I don't know why user-select:text is not working on my Chrome 13 Mac?