when I add the onLoadMore function to the table it shrinks have no clue how to fix it
using nextui
<Table
aria-label="Example table with custom cells"
css={{
height: "30vh",
minWidth: "100%",
}}
selectionMode="multiple"
>
<Table.Header columns={columns}>
{(column) => (
<Table.Column
key={column.uid}
hideHeader={column.uid === "actions"}
align={column.uid === "actions" ? "center" : "start"}
>
{column.name}
</Table.Column>
)}
</Table.Header>
<Table.Body loadingState={"f"}
onLoadMore={()=>console.log("hhh")} items={users}>
{(item) => (
<Table.Row>
{(columnKey) => (
<Table.Cell>{renderCell(item, columnKey)}</Table.Cell>
)}
</Table.Row>
)}
</Table.Body>
</Table>
);
when I add the onLoadMore function to the table it shrinks have no clue how to fix it
using nextui
when I add the onLoadMore function to the table it shrinks have no clue how to fix it
using nextui
when I add the onLoadMore function to the table it shrinks have no clue how to fix it
using nextui
Related
I have made my row header, of material UI Table component, sticky using the stickyHeader attribute
<Table stickyHeader className={classes.table}></Table>
there are two drop-downs displayed above this table, these are implemented using the ReactSelect component
const DropDown = props => (
<div className={[props.divClasses, props.error ? 'error-class' : ''].join(' ')}>
<ReactSelect
{...props}
classNamePrefix="normal-select"
disabled={props.disabled ? props.disabled : false}
multi={props.multi}
placeholder={props.placeholder ? props.placeholder : 'Select'}
closeOnSelect={props.closeOnSelect}
clearable={props.clearable}
searchable={props.searchable}
options={props.options ? props.options : []}
value={props.simpleValue ? props.options.filter(
({ value }) => value === props.value) : props.value}
isLoading={props.isLoading}
className={` ${props.className ? props.className : ''}`}
onChange={option => props.onChange(props.property, props.simpleValue ? option?.value : option)}
onBlur={props.onBlur}/>
{props.error && <FormHelperText style={{ color: '#f44336' }}>{props.error}</FormHelperText>}
</div>
);
because of being sticky, the header of the table component is now corrupting the view of the drop downs
currently, I am getting,
the expected behavior is,
kindly help me in this regard.
The reason of this overlapping is because mui table's sticky header's default z-index value is 2 and is greater than react-select menu's default z-index value 1.
So, you need to increase z-index of react-select component's menu property to some value that is greater than 2 like this:
const customStyles = {
menu: (provided, state) => ({
...provided,
zIndex: 3
})
};
<ReactSelect
value={selectedOption}
onChange={setSelectedOption}
options={options}
styles={customStyles}
/>
You can take a look at this sandbox for a live working example of this usage.
The current context looks like this:
There are a lot of items in the last column, and all columns are elongated and you need to scroll the entire webpage down to see the rest of the items in that last column.
What I want to achieve is:
The droppable columns have a maximum length, such that when there are more draggable items in one of it, the column length does not auto grow anymore. But you can scroll within that column downwards to show more draggable items.
Code:
const ProjectBoardLists = ({ ... }) => {
...
return (
<DragDropContext onDragEnd={HandleIssueDrop}>
<Lists>
{Object.values(IssueStatus).map(status => (
<List
currentUserId={currentUserId}
/>
))}
</Lists>
</DragDropContext>
);
};
and List is defined as
const List = ({ ... }) => {
...
return (
<Droppable key={status} droppableId={status} style={{overflow: "scroll"}}>
{provided => (
<List>
<Title>
{`${IssueStatusCopy[status]} `}
<IssuesCount>{formatIssuesCount(allListIssues, filteredListIssues)}</IssuesCount>
</Title>
<Issues
{...provided.droppableProps}
ref={provided.innerRef}
data-testid={`board-list:${status}`}
>
{filteredListIssues.map((issue, index) => (
<Issue key={issue.id} projectUsers={project.users} issue={issue} index={index} />
))}
{provided.placeholder}
</Issues>
</List>
)}
</Droppable>
);
};
The Documentation (https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#scroll-containers) claims that
This library supports dragging within scroll containers
(DOM elements that have overflow: auto; or overflow: scroll;).
The only supported use cases are:
The <Droppable /> can itself be a scroll container with no scrollable parents
The <Droppable /> has one scrollable parent
So I tried to add style={{overflow: "scroll"}} to <Droppable />, but nothing happened.
How exactly can I do it?
We have a requirement display the total sum for 2 columns
import MaterialTable, {MTableToolbar, MTableAction} from "material-table";
.
.
.
<MaterialTable
actions={transformActions()}
data={data}
editable={props.allowRowEditing ? {
onRowAdd: newData => onRowAdd(newData),
onRowDelete: oldData => onRowDelete(oldData),
onRowUpdate: (newData, oldData) => onRowUpdate(newData, oldData)
} : {}}
icons={tableIcons}
.
.
./>
I have a function to calculate the total and display the total; however on sorting the column, the row that displays the total moves around as well. Is there a way to fix the last row in material-table itself? Or are there any style hacks that can be done to achieve this?
Based on below issue report, there isn't any way as of now to achieve this using material table's properties
Github Issue#27
Note that I am not at liberty to use another table library.
I have tried to target the last row and set it's position as absolute as shown below
position: absolute;
height: 55px;
width: calc(100% - 1px);
bottom: 0;
while this fixes the last row in its position, I can't find a dynamic way to align the columns in accordance to the other rows.
You can use the TableFooter element to stick your totals to the bottom of the table.
An example of overriding the body component to add a footer:
import { TableCell, TableFooter, TableRow } from "#material-ui/core";
// ...
<MaterialTable
// ...
components={{
Body: (props) => (
<>
<MTableBody {...props}/>
<TableFooter>
<TableRow>
<TableCell colSpan={2}/>
<TableCell colSpan={2}>Total: 12345</TableCell>
</TableRow>
</TableFooter>
</>
)
}}
/>
Working example here: https://codesandbox.io/s/long-tree-fqkno
Extension to Ricardo answer of how to render actual total value
Body: (props) => {
let totalObj = {
actualSum: 0
}
props.renderData.forEach((rowData: any) => {
totalObj.actualSum += rowData.act_svc_lvl;
});
return (
<>
<MTableBody {...props}/>
<TableFooter>
<TableRow>
<TableCell colSpan={1}/>
<TableCell colSpan={1}/>
<TableCell colSpan={1}>{totalObj.actualSum}</TableCell>
</TableRow>
</TableFooter>
</>
)}
When using useRowSelect and useTable how can I specify column width for the first column so that it never exceeds the width of the checkboxes? I don't want to use useFlex as I want to preserve column widths based on the header width.
You'll notice when the table is set to 100% width the first column starts to grow if you expand your browser window.
Here's an example:
https://codesandbox.io/s/youthful-hamilton-j0rev?file=/src/App.js
I'm also open to just grabbing the Header and Cell from where I'm pushing into the columns array and adding a className, but wasn't able to find a way to do that. How can I add a className so that the table cell that surrounds this column data has a className to attach to:
(hooks) => {
isRowSelectable &&
hooks.allColumns.push((columns) => [
{
id: 'selection',
minWidth: 35,
width: '35px',
maxWidth: 35,
Header: ({ getToggleAllRowsSelectedProps }) => (
<Checkbox alignSelf="center" {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }: any) => {
row.className = '123';
return <Checkbox alignSelf="center" {...row.getToggleRowSelectedProps()} />;
}
},
...columns
]);
}
Since Array.map can pass the index of the element, it's fairly simple to conditionally add a className to the cell if the row index is 0:
{
rows.map((row, i) => {
prepareRow(row);
return (
<td className={i === 0 ? "class-name" : ""} {...cell.getCellProps()>
{cell.render("Cell")}
</td>
)
}
If you want the same class to apply to the headers, you can do the same thing on the <th> or <tr> elements, since those are also rendered with Array.map. You don't actually need to touch the columns object at all for this change.
I am working on a react component and I need to limit the displayed text in a field that changes based on a input component. I am trying to make it so when the text box input becomes longer than the width of the component, to display what can fit followed by ... . I have something that works but it uses width: field to set how wide the text can go and I am looking for a responsive way to make it fit more or less text
<span
className='itemTitle'
onMouseLeave={this.handleMouseLeave}
id = 'itemTitle'
style = {{width: '420px', "whiteSpace": "nowrap",
overflow:"hidden !important",
'textOverflow': "ellipsis",
'display': 'inline-block'}}>
{prompt || card.get('promptText')}
</span>
The solution I came up with is as follows.
From the parent component which renders a Title Component, I add a ref and on add a resize eventlistener which sends new props to the ItemTitle component.
<div ref={input => {{this.rangeInput = input}}}>
<ItemTitle
prompt={prompt}
{...this.props}
width = {this.state.width}
/>
</div>
updateDimensions = () => {
this.setState({
width: this.rangeInput.offsetWidth
})
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions);
}
/**
* Remove event listener
*/
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
Then in ItemTitle.js
<span
className='itemTitle'
onMouseLeave={this.handleMouseLeave}
id = 'itemTitle'
style = {{width: this.state.width - 140, "whiteSpace": "nowrap",
overflow:"hidden !important",
'textOverflow': "ellipsis",
'display': 'inline-block'}}>
{prompt || card.get('promptText')}
</span>