Skip to content

Commit

Permalink
update column actions docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinVandy
KevinVandy committed Oct 23, 2023
1 parent 9244d39 commit 221e6d2
Show file tree
Hide file tree
Showing 11 changed files with 244 additions and 173 deletions.
9 changes: 3 additions & 6 deletions apps/material-react-table-docs/components/navigation/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
`}
</style>
<AppBar position="fixed">
<Toolbar variant="dense">
<Toolbar disableGutters variant="dense">
<Box sx={{ display: 'flex' }}>
{!isDesktop && (
<IconButton
Expand All @@ -134,7 +134,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
alignItems: 'center',
cursor: 'pointer',
display: 'flex',
fontSize: isTablet ? '1.6rem' : undefined,
fontSize: isTablet ? '1.6rem' : '1.5rem',
gap: '1rem',
}}
variant="h1"
Expand Down Expand Up @@ -183,10 +183,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
sx={{
display: 'flex',
alignItems: 'center',
gap: {
xs: '0.25rem',
sm: '0.5rem',
},
gap: '0.25rem',
}}
>
<Tooltip arrow title="Github">
Expand Down
45 changes: 17 additions & 28 deletions apps/material-react-table-docs/examples/column-actions-space/sandbox/src/JS.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,9 @@
import { useMemo } from 'react';
import { MaterialReactTable } from 'material-react-table';

const data =
//data definitions...
[
{
id: 1,
firstName: 'Dillon',
lastName: 'Howler',
},
{
id: 2,
firstName: 'Ross',
lastName: 'Everest',
},
]; //end
import {
MaterialReactTable,
useMaterialReactTable,
} from 'material-react-table';
import { data } from './makeData';

const Example = () => {
const columns = useMemo(
Expand All @@ -36,19 +25,19 @@ const Example = () => {
[], //end
);

return (
<MaterialReactTable
columns={columns}
data={data}
muiTableHeadCellProps={{
sx: {
'& .Mui-TableHeadCell-Content': {
justifyContent: 'space-between',
},
const table = useMaterialReactTable({
columns,
data,
muiTableHeadCellProps: {
sx: {
'& .Mui-TableHeadCell-Content': {
justifyContent: 'space-between',
},
}}
/>
);
},
},
});

return <MaterialReactTable table={table} />;
};

export default Example;
48 changes: 19 additions & 29 deletions apps/material-react-table-docs/examples/column-actions-space/sandbox/src/TS.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
import { useMemo } from 'react';
import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';

const data =
//data definitions...
[
{
id: 1,
firstName: 'Dillon',
lastName: 'Howler',
},
{
id: 2,
firstName: 'Ross',
lastName: 'Everest',
},
]; //end
import {
MaterialReactTable,
useMaterialReactTable,
type MRT_ColumnDef,
} from 'material-react-table';
import { data, type Person } from './makeData';

const Example = () => {
const columns = useMemo<MRT_ColumnDef<(typeof data)[0]>[]>(
const columns = useMemo<MRT_ColumnDef<Person>[]>(
//column definitions...
() => [
{
Expand All @@ -36,19 +26,19 @@ const Example = () => {
[], //end
);

return (
<MaterialReactTable
columns={columns}
data={data}
muiTableHeadCellProps={{
sx: {
'& .Mui-TableHeadCell-Content': {
justifyContent: 'space-between',
},
const table = useMaterialReactTable({
columns,
data,
muiTableHeadCellProps: {
sx: {
'& .Mui-TableHeadCell-Content': {
justifyContent: 'space-between',
},
}}
/>
);
},
},
});

return <MaterialReactTable table={table} />;
};

export default Example;
18 changes: 18 additions & 0 deletions apps/material-react-table-docs/examples/column-actions-space/sandbox/src/makeData.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export type Person = {
id: number;
firstName: string;
lastName: string;
}

export const data = [
{
id: 1,
firstName: 'Dylan',
lastName: 'Murray',
},
{
id: 2,
firstName: 'Raquel',
lastName: 'Kohler',
},
];
103 changes: 83 additions & 20 deletions apps/material-react-table-docs/examples/custom-column-actions/sandbox/src/JS.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,108 @@
import { useMemo } from 'react';
import { MaterialReactTable } from 'material-react-table';
import {
MaterialReactTable,
useMaterialReactTable,
} from 'material-react-table';
import { Divider, MenuItem } from '@mui/material';
import { data } from './makeData';

const Example = () => {
const columns = useMemo(
() => [
{
accessorKey: 'id',
enableColumnActions: false,
header: 'ID',
renderColumnActionsMenuItems: ({ closeMenu }) => [
<MenuItem
key={1}
onClick={() => {
console.log('Item 1 clicked');
closeMenu();
}}
>
Item 1
</MenuItem>,
<MenuItem
key={2}
onClick={() => {
console.log('Item 2 clicked');
closeMenu();
}}
>
Item 2
</MenuItem>,
],
},
{
accessorKey: 'firstName',
header: 'First Name',
renderColumnActionsMenuItems: ({
closeMenu,
internalColumnMenuItems,
}) => [
...internalColumnMenuItems,
<Divider key="divider-1" />,
<MenuItem
key={'item-1'}
onClick={() => {
console.log('Item 1 clicked');
closeMenu();
}}
>
Item 1
</MenuItem>,
<MenuItem
key={'item-2'}
onClick={() => {
console.log('Item 2 clicked');
closeMenu();
}}
>
Item 2
</MenuItem>,
],
},
{
accessorKey: 'lastName',
header: 'Last Name',
renderColumnActionsMenuItems: ({
closeMenu,
internalColumnMenuItems,
}) => [
<MenuItem
key={'item-1'}
onClick={() => {
console.log('Item 1 clicked');
closeMenu();
}}
>
Item 1
</MenuItem>,
<MenuItem
key={'item-2'}
onClick={() => {
console.log('Item 2 clicked');
closeMenu();
}}
>
Item 2
</MenuItem>,
<Divider key="divider-1" />,
...internalColumnMenuItems.splice(0, 3),
],
},
],
[],
);

const data = useMemo(
//data definitions...
() => [
{
id: 1,
firstName: 'Dylan',
lastName: 'Murray',
},
{
id: 2,
firstName: 'Raquel',
lastName: 'Kohler',
},
],
[],
//end
);
const table = useMaterialReactTable({
columns,
data,
//or you could define the menu items here for all columns
// renderColumnActionsMenuItems: ({ closeMenu }) => [],
});

return <MaterialReactTable columns={columns} data={data} />;
return <MaterialReactTable table={table} />;
};

export default Example;
40 changes: 15 additions & 25 deletions apps/material-react-table-docs/examples/custom-column-actions/sandbox/src/TS.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,14 @@
import { useMemo } from 'react';
import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
import {
MaterialReactTable,
useMaterialReactTable,
type MRT_ColumnDef,
} from 'material-react-table';
import { Divider, MenuItem } from '@mui/material';

//data definitions...
const data = [
{
id: 1,
firstName: 'Dylan',
lastName: 'Murray',
},
{
id: 2,
firstName: 'Raquel',
lastName: 'Kohler',
},
];
//end
import { data, type Person } from './makeData';

const Example = () => {
const columns = useMemo<MRT_ColumnDef<(typeof data)[0]>[]>(
const columns = useMemo<MRT_ColumnDef<Person>[]>(
() => [
{
accessorKey: 'id',
Expand Down Expand Up @@ -106,14 +96,14 @@ const Example = () => {
[],
);

return (
<MaterialReactTable
columns={columns}
data={data}
//or you could define the menu items here for all columns
// renderColumnActionsMenuItems={({ closeMenu }) => []}
/>
);
const table = useMaterialReactTable({
columns,
data,
//or you could define the menu items here for all columns
// renderColumnActionsMenuItems: ({ closeMenu }) => [],
});

return <MaterialReactTable table={table} />;
};

export default Example;
18 changes: 18 additions & 0 deletions apps/material-react-table-docs/examples/custom-column-actions/sandbox/src/makeData.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export type Person = {
id: number;
firstName: string;
lastName: string;
}

export const data = [
{
id: 1,
firstName: 'Dylan',
lastName: 'Murray',
},
{
id: 2,
firstName: 'Raquel',
lastName: 'Kohler',
},
];
Loading

0 comments on commit 221e6d2

Please sign in to comment.