-
-
Notifications
You must be signed in to change notification settings - Fork 69
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support column groups #207
Comments
Implementing this in a way that doesn't break existing functionality (i.e. columns with |
Hi there! |
We would really badly need this feature, since the implementation of mantine This leads to us having to pick if we want sorting and filtering but no column groups (mantine-datatable) or column groups but no sorting and filtering (mantine native |
@mcmxcdev: Thank you for your patience and for using Mantine DataTable! |
Another thing to consider is how this would affect the API. Adding a prop that serves as an alternative to <DataTable
data={[/* … */]}
groups={[
{
key: "",
component: <></>,
columns: [/* … */]
},
{
key: "",
component: <></>,
columns: [/* … */]
},
]}
/> This still leaves the issue of the In a way, this also applies for the result of Modifying the hook's code such that it works on an array of media queries instead would probably solve this issue. When doing so, it might also be worth performing the query directly in Ignoring that last point, the rendering of header groups could then be implemented something along the lines of: // DataTableHeaderGroup.tsx
export const DataTableHeaderGroup: FC = ({ columns, component }) => {
const mediaQueries = useMemo(() => columns.map(column.visibleMediaQuery), [columns]);
const queryResults = useMediaQueries(mediaQueries); // boolean[]
const numberOfVisibleColumns = useMemo(() => {
return columns.filter((column, i) => queryResults[i] && !column.hidden).length
}, [queryResults, columns]);
return numberOfVisibleColumns == 0 ? null : <th colSpan={numberOfHiddenColumns}>
{ component }
</th>
}; // DataTableHeader.tsx
// …
<thead>
{groups ? <tr>
{selectionVisible ?? <th></th>}
{groups.map(group => <DataTableHeaderGroup {...group} />)}
</tr> : null}
<tr>{/* … */}</tr>
</thead>
|
This feature is available starting with |
is this work for nested groups? |
@icflorescu there no information about nested groups… |
Is your feature request related to a problem? Please describe.
![image](https://user-images.githubusercontent.com/140349/224980058-33a6bb81-cacc-4f87-80f4-682cb650183c.png)
We have columns which need to be grouped by a common denominator - something like this:
Describe the solution you'd like
It would be great to support column groups as per the image above.
Describe alternatives you've considered
For now I'm prefixing each column separately for example:
Medical Plan - Name
Medical Plan - Carrier
This doesn't look very well...
Additional context
The text was updated successfully, but these errors were encountered: