gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 932 forks source link

Should I be able to pass a className to <MUIDataTable />? #1309

Open ertw opened 4 years ago

ertw commented 4 years ago

I am passing a className string to a component. This works, but className is not documented as a prop, and is not present in the TS types:

export interface MUIDataTableProps {
    columns: MUIDataTableColumnDef[];
    data: Array<object | number[] | string[]>;
    options?: MUIDataTableOptions;
    title: string | React.ReactNode;
}

If passing in className as a prop is officially supported, I would like to update the documentation and submit a PR to DefinitelyTyped. My usecase is passing in a grid-area like so:

table: {
    gridArea: 'table',
  },

Expected Behavior

Know whether passing a class to <MUIDataTable /> is supported, only accidentally working.

Current Behavior

Passing a className to <MUIDataTable /> applies the JSS className.

Steps to Reproduce (for bugs)

<MUIDataTable className={classes.myClassName} />

Your Environment

"mui-datatables": "^2.15.0" "@types/mui-datatables": "^2.14.2" "react": "^16.13.0" "typescript": "^3.9.2"

patorjk commented 4 years ago

You are correct, it is an undocumented prop: https://github.com/gregnb/mui-datatables/blob/master/src/MUIDataTable.js#L1386

It attaches a class to the Paper component which surrounds the table. It's been around since the 2.0.0 release of the table too. It should probably be documented in the API section. If you want to do a PR for it I'll add it in.

As for a more targeted approach, if you wanted to attach a className to the table element, you can use the setTableProps option.

var options = {
    setTableProps: () => ({className: "classname-to-attach-to-table"})
}
ertw commented 4 years ago

Thanks, I see that className is already in PropTypes (as a TS user I hadn't thought to look), so I'll submit a PR adding className to the documentation.

ertw commented 4 years ago

@patorjk thanks, PR here: https://github.com/ertw/mui-datatables/pull/1 I am also going to create a PR to update the TS types.

As an aside- the contributing section does not mention how to contribute, so I'm assuming PR to master is the correct method- let me know if there is a different process I should follow.

Thanks!

patorjk commented 4 years ago

Thank you for putting that together! PR to master is fine, though I'll probably switch it to v3, which will most likely release sometime in the next week or two. Just be sure to submit it to this repo, looks like you accidentally submitted it to your own repo.

I'm not too familiar with TypeScript but would definitely welcome PRs to get in working correctly for it.