Skip to content
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

[DataGrid] Improve column definition typing #7224

Merged
merged 7 commits into from
Dec 21, 2022

Conversation

cherniavskii
Copy link
Member

@cherniavskii cherniavskii commented Dec 16, 2022

Closes #7188

Changelog

Breaking changes

  • The GridColumns type was removed. Use GridColDef[] instead.
  • The GridActionsColDef interface was removed. Use GridColDef instead.
  • The GridEnrichedColDef type was removed. Use GridColDef instead.
  • The GridStateColDef type was removed.
    If you use it to type searchPredicate - use GridColumnsPanelProps['searchPredicate'] instead.
    If you use it to type getApplyFilterFn - use GridFilterOperator['getApplyFilterFn'] instead.

@cherniavskii cherniavskii added breaking change component: data grid This is the name of the generic UI component, not the React module! typescript v6.x dx Related to developers' experience labels Dec 16, 2022
@@ -112,13 +112,8 @@ const parseInterfaceSymbol = (

const exportedSymbol = project.exports[interfaceName];
const type = project.checker.getDeclaredTypeOfSymbol(exportedSymbol);
const typeDeclaration = type.symbol.declarations?.[0];
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to remove typeDeclaration check since GridColDef is now TypeAlias, not Interface.
Otherwise it was throwing an error here.

@mui-bot
Copy link

mui-bot commented Dec 16, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-7224--material-ui-x.netlify.app/

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 695.5 1,088.9 695.5 882.34 172.292
Sort 100k rows ms 610.1 1,301.6 610.1 962.68 221.992
Select 100k rows ms 199.1 290.1 232.5 245.32 33.833
Deselect 100k rows ms 136.6 287.8 178 212.98 62.123

Generated by 🚫 dangerJS against b35e6f6

const getApplyFilterFn = (
filterItem: GridFilterItem,
column: GridStateColDef,
const getApplyFilterFn: GridFilterOperator['getApplyFilterFn'] = (
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's actually better to type the whole function rather than arguments. And this way we can avoid exporting GridStateColDef

| <span class="prop-name optional">width<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">number</span> | <span class="prop-default">100</span> | Set the width of the column. |
| Name | Type | Default | Description |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span class="prop-name optional">aggregable<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span> | <span class="prop-type">boolean</span> | <span class="prop-default">true</span> | If `true`, the cells of the column can be aggregated based. |
Copy link
Member Author

@cherniavskii cherniavskii Dec 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Premium properties weren't documented here before, so this is a useful side-effect :)

@@ -173,7 +172,7 @@ const defaultColumnsStyles = {
[GRID_DATETIME_COL_DEF.type as string]: { numFmt: 'dd.mm.yyyy hh:mm' },
};

const serializeColumn = (column: GridStateColDef, columnsStyles: ColumnsStylesInterface) => {
const serializeColumn = (column: GridColDef, columnsStyles: ColumnsStylesInterface) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to use GridStateColDef here, since we don't use any properties specific to GridStateColDef, like computedWidth

groupedByColDef: GridColDef | GridStateColDef,
applyHeaderName: boolean,
) => {
const getGroupingCriteriaProperties = (groupedByColDef: GridColDef, applyHeaderName: boolean) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as #7224 (comment)

@cherniavskii cherniavskii marked this pull request as ready for review December 16, 2022 15:32
Copy link
Member

@MBilalShafi MBilalShafi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!
It's a nice dx update, I too was confused on a couple of occasions about when to use which type, it's much better now 👍

@cherniavskii cherniavskii merged commit fe389c3 into mui:next Dec 21, 2022
@cherniavskii cherniavskii deleted the gridColDef-ts branch December 21, 2022 18:43
@m4theushw m4theushw mentioned this pull request Dec 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: data grid This is the name of the generic UI component, not the React module! dx Related to developers' experience typescript v6.x
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[RFC] Improve grid column definition typing
3 participants