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.
Related
and I have the following code:
return (
<Box sx={{ height: 400 }}>
<DataGrid columns={columns} rows={rows} />
</Box>
)
and I am having the table getting rendered as:
I want the column of the email to take the width of the widest row cell automatically, so I want the table to render as follows:
My colums and rows look simply as follows:
const columns = [ { field: "firstName" }, { field: "lastName" }, ...etc ]
const rows = [
{ firstName: "Camil Pasa Sokak", lastName: "In The Village", ...etc },
... etc
]
How to do it in MUI x (community table, the free one)?
I want the column of the email to take the width of the widest row cell automatically
please note: since the table is wide, it will automatically show you a scrollbar (x and y scrollbars). I want to keep this functionality, I want to keep these scrollbars (from the x and y) I don't want to disable them.
Here's a sandbox instnce:
https://codesandbox.io/s/strange-newton-z6pwj4?file=/src/App.js
Looking at the docs for the datatable component you are using, it's not super clear the best way to go about it. The crux of the problem is that this is a div + flexbox table and not a true html table. As such, cells within a single column are not really "bound" to each other the same way as a regular html table.
There is a page which addresses column dimensions, but I could not find a satisfactory solution there. I was particularly disappointed that maxWidth seems to do nothing. The closest I got was setting a fixed column width, but I don't think that's what you want:
const columns = [{
field: "email", width: 300,
}]
So then I moved on to their styling cells page, which allows you to have much more control over styling, but this still doesn't work because one flex cell does not affect the size of all flex cells in a column - each row has a different sized cell based on the size of the email address.
const columns = [{
field: "email", cellClassName: "foobar",
}]
<DataGrid columns={columns} rows={rows} sx={{
"& .foobar": {
maxWidth: "300px !important"
}
}} />
So, my best suggestion is to loop over the data, find the longest email address, and set the fixed width based on that. This kinda sucks, but I don't see another way to properly set dimensions for a flexbox-based table:
const longestEmail = rows.reduce((longest, row) => {
return row.email.length > longest.length ? row.email : longest
}, '');
const columns = [{
// play around with the multiplier until you find a suitable width
field: "email", width: longestEmail.length * 9,
}]
This is from the Documentation..Number Signature
<DataGrid
columns={[
{ field: 'username', colSpan: 2, hideable: false },
{
field: 'organization',
sortable: false,
filterable: false,
hideable: false,
},
{ field: 'age', hideable: false },
]}
rows={rows}
{...other}
/>
you can use colspan but it sets all cells in the column to span a given number of columns.
const columns = [{
field: "email",colSpan:2,
},]
I am trying to use react-table to visualise some data structured as below:
{
companyName: "Barclays Bank Plc",
tenancies: ["G.01 # Newbuilding"],
status: "Active",
accountNumber: "EX209302",
logo: "companylogo1",
},
{
companyName: "Boeing AerospaceLtd",
tenancies: ["G.01 # Newbuilding", "G.02 # Newbuilding"],
status: "Active",
accountNumber: "EX209302",
logo: "companylogo1",
},
My column definition (which doesn't work) looks something like this:
{
Header: "Tenancies",
accessor: "tenancies",
Cell: (tableProps) => (
<div>{tableProps.cell.value.forEach((item) => item)}</div>
),
},
What I am trying to do is display each array item within it's own HTML tags (such as a div) so I can visually style and seperate them within the table cell.
Can anyone point me in the right direction as to the best way to achieve this?
According to the API document, the Cell receives the table Instance and returns a valid JSX.
{
...
Cell: (tableInstance) => JSX
}
Since the tenancies array are available from tableInstance.row.original.tenancies, so you can change your tenancies column definition as follow:
{
Header: "Tenancies",
Cell: ({ row }) => {
return (
<div>
{row.original.tenancies.map((tenancy, i) => (
<div key={i}>{tenancy}</div>
))}
</div>
);
}
}
Here is the example:
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?
Previous in react-table 6, one just added a show: false to the column spec to hide a column.
How can this be implemented in react-table 7?
You can access getToggleHiddenProps property from the column.
According to the docs
You can check the demo:
https://codesandbox.io/s/xenodochial-pasteur-dzk3k?file=/src/components/ColumnHiding.js
Also, if you want to hide some columns by default, add the accessors for the columns you want to hide and pass it as an array of strings to initialState.hiddenColumns
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
allColumns,
getToggleHideAllColumnsProps,
prepareRow
} = useTable({
initialState: {
hiddenColumns: ["firstName"]
},
columns,
data
});
// usual table markup from here on
}
There is more than one way to do this, but one way is to respond to the show property in from your column spec.
In your react-table 7 code that outputs the header:
eg.
headerGroup.headers.map(column => {
return ( <TableCell> column.render('Header') </TableCell> )
})
add a filter:
eg.
headerGroup.headers..filter(column => column.show !== false).map(column => {
return ( <TableCell> column.render('Header') </TableCell> )
})
And you your react-table 7 code that outputs your rows:
eg.
{row.cells.map(cell =>
{
return (
<TableCell {...cell.getCellProps({ className: cell.column.className })}>
{cell.render('Cell')}
</TableCell>
);
})}
add a filter:
eg.
{row.cells.filter(cell => cell.column.show !== false).map(cell =>
{
return (
<TableCell {...cell.getCellProps({ className: cell.column.className })}>
{cell.render('Cell')}
</TableCell>
);
})}
For aesthetic reasons I'm trying to add a HeaderGroup to the "select" (checkboxes) column solution provided in react-teable examples.
hooks => {
hooks.visibleColumns.push(columns => {
return [
{
id: 'selection',
// Make this column a groupByBoundary. This ensures that groupBy columns
// are placed after it
groupByBoundary: true,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
),
},
...columns,
]
})
Source:
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink
I've tried many ways using hooks object but none of them worked (for example nested calls to hooks.headerGroups.push and then hooks.visibleColumns.push).
Here is my last attempt which makes sense but doesn't work either (TypeError: Cannot read property 'forEach' of undefined) :
hooks => {
hooks.headerGroups.push(headerGroups => {
return [
{
Header: 'X',
columns: [
{
id: 'selection',
// Make this column a groupByBoundary. This ensures that groupBy columns
// are placed after it
groupByBoundary: true,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
),
}
]
},
...headerGroups
]
})
})
Thank you for your help ^^