Having trouble with styling table created by react-table library.
Please find the design below.
Table is created the way it is shown in documentation. Is it possible to colour headers as shown in design?
Thank you in advance
P.S.
Here is the code snippet from documentation
To create headers I need to create an array. So i cant change style for a specific header (actually I can provide element to render, but it will be rendered inside the element)
Check this, there are class names added to the data where the data should be styled differently. I think that's what you need.
You can use any react component or JSX to display content in column headers, cells and footers.
const columns = [
{
Header: () => (
<span>
<i className="fa-tasks" /> Progress
</span>
)
}
]
kindly check on this link for further details
https://github.com/tannerlinsley/react-table/tree/v6#custom-cell-header-and-footer-rendering
Had to use a workaround.
As Taha Jamil mentioned you can any JSX to render inside of the Header. By adjusting some styles you will get something like this:
{
Header: () => {
return(
<div
style={{
backgroundColor: "red",
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
padding: "12px 20px",
}}
>
Title
</div>
);
}
}
Not the best solution, but works
Related
Introduction: I have a React component structure that looks like this.
-- ParentComponent.tsx --
<div>Some Content Here</div>
<ChildComponent/>
<div style={{ position: "relative", zIndex: "1" }}>
Some Other Content -- should be covered when the absolutely positioned content
inside of ChildComponent renders on the screen!
</div>
-- ChildComponent.tsx --
/* at the top of my render method */
const [booleanCondition, setBooleanCondition] = useState(false);
const toggleBooleanCondition = () => { setBooleanCondition(!booleanCondition); };
...
/* much later, in the return value of render method */
<div style={{ position: "relative", zIndex: "2" }}>
Some Content Here, capable of calling toggleBooleanCondition()
{ booleanCondition ?
<div style={{ position: "absolute", width: "400px", height: "400px" }}>
Some Content Here. Should definitely cover the bottom <div> in parent!
</div>
: <></>
</div>
The toggle logic definitely works. The problem is, I would expect the div in ChildComponent.tsx to sit cleanly on top of the div in ParentComponent.tsx, which has a smaller z-index. However, this is not the case: the screenshot below shows that elements are being rendered in a random sort of order.
I feel like the issue may be due to different components assigning different meanings to their own z-indexes. No matter how I played with position: relative, and z-index: , nothing seemed to change. Does anybody know of a reliable solution to this problem??
I'm having a table (two directional scroll) with a sticky header showing the title of columns. If it wouldn't support two directional scroll, I could just place the header outside of the scroll view, but it's not the case.
I want to implement grouping of rows (basically SectionList with stickySectionHeadersEnabled). There an upcoming section header replaces the previous section header, which is the expected behaviour for my case. However, I want to have two sticky headers stay in place (the table header, and the current section header). I couldn't find a way to set the top value for the sticky headers as in html:
.container {
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
}
.tableHeader, .sectionHeader {
position: sticky;
}
.tableHeader {
top: 0;
}
.sectionHeader {
top: 20px;
}
.section {
height: 500px;
width: 500px;
}
.section:last-of-type {
background: wheat;
}
<div class='container'>
<div class='tableHeader'>Table header</div>
<div class='section'>
<div class='sectionHeader'>Section header 1</div>
</div>
<div class='section'>
<div class='sectionHeader'>Section header 2</div>
</div>
</div
Any way to earn the above in react native?
I was thinking about the implementation of nesting two ScrollViews, where the outer could be horizontal, and it could have the first child as the table header, and the second is the SectionList. It could work, but not being able to scroll diagonally is very annoying for me, had a hard time to implement it on ios, and wasn't even able to do it on android, so it would be a last case.
You can use a FlatList with stickyHeaderIndices where the indices are the indices of the headers in your array.
const renderItem = ({ item }) => <Item title={item.title} />;
<FlatList
data={DATA}
stickyHeaderIndices={[0, 6]}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
For the diagonal scroll, it should work on iOS with directionalLockEnabled set to false according to the docs but it doesn't.
For both ScrollViews to work on android the nestedScrollEnabled property should be set to true.
Here's a snack with an implementation, it doesn't seem to work on the web but it works on the iOS and android emulators:
https://snack.expo.dev/yyz6ro3Hi
Here is codesandbox. I am trying to have the ability to sort by the first name and last name The default Datagrid only shows the sort icon when hovering. Is there a way I can set it to be always visible? Thanks for the help!
you can use .MuiDataGrid-iconButtonContainer. however Material-UI doesn't provided default icon for unsorted list. I have forked your demo and updated it. added icon for unsorted list too. please check codesandbox
This is what I did:
const StyledDataGrid = styled(DataGrid)(() => ({
'& .MuiDataGrid-iconButtonContainer': {
marginLeft: '2px',
visibility: 'visible !important',
width: 'auto !important',
},
}))
I created a styled component which adds some custom styling to DataGrid. Specifically to always show the icon and take up width for it. Using !important is not recommended, but doesn't harm in this case.
I must add, this only works with using custom sort icons, like so:
<StyledDataGrid
components={{
ColumnSortedAscendingIcon,
ColumnSortedDescendingIcon,
ColumnUnsortedIcon,
}}
/>
If you don't want to use custom icons, I'm sure it's doable, you just need to play with CSS bit more.
Add the below code in .scss file. (.MuiDataGrid-sortIcon is pre-defined class of Mui Datagrid). Hope it helps!
.MuiDataGrid-sortIcon {
opacity: inherit !important;
}
You can use the sx prop in DataGrid like so:
<DataGrid
sx={{
'.MuiDataGrid-iconButtonContainer': {
visibility: 'visible',
},
'.MuiDataGrid-sortIcon': {
opacity: 'inherit !important',
},
}}
In my case, I had to style both the iconButtonContainer and sortIcon make sure it's always visible.
First of all, I have tested all possible solutions I have founded and I still didn't solve my problem.
I want to put a shorter height in my material-table rows. This is what it looks like right now.
Table
I would like my rows to have a height similar to the headers in that image. I have tried many things, one of them was the following:
options={{
headerStyle: {
whiteSpace: "nowrap",
height: 20,
maxHeight: 20,
padding: 0
},
rowStyle: {
height: 20,
maxHeight: 20,
padding: 0
},
}}
I would really appreciate it if someone can help me.
You can set options in material-table
options={{
padding: "dense",
}}
I had the same problem with React Material-Table. I fixed adding this in the global index.css of the project:
.MuiTableCell-root {
padding: 0 14px !important;
}
and then i could modify the height in the rowStyle in the options of the Material-Table component:
options = {
rowStyle: {
height: "20px"
}
}
you need to use withStyles and update the specific element class style, so it will reflect to all the elements. Check the working example as you expected here : codesandbox
import MuiTableCell from '#material-ui/core/TableCell';
const TableCell = withStyles(theme => ({
root: {
height: 10,
padding:0
}
}))(MuiTableCell);
Much more simplified, overwrite padding of 16px to smaller size...<TableCell style={{padding:5px}} ...>.
I think the link below might be helpful for you.
customizing material ui table
I see that it is possible to embed React components with MDX:
https://v2.docusaurus.io/docs/markdown-features/#embedding-react-components-with-mdx
However, this method works for a specific page. How can I make it work for all markdown files in the docs? I am trying to add a similar component as in the link above to change the style of some inline text. I tried to edit src/pages/index.js but it didn't work.
const HighlightGreen = (children) => (
<span
style={{
backgroundColor: '#00a400', // green,
borderRadius: '2px',
color: '#fff',
padding: '0.2rem',
}}>
{children}
</span>
);
It seems now you could "swizzle" the root component, by creating a website/src/theme/Root.js file, according to: https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root
yarn swizzle #docusaurus/theme-classic MDXComponents --danger
In src/theme/MDXComponents/index.js:
import {MyComponent} from "/src/components/MyComponent";
...
const MDXComponents = {
MyComponent,
...