Skip to content

Commit

Permalink
[docs][TablePagination] Add Tailwind CSS & plain CSS introduction demo (
Browse files Browse the repository at this point in the history 
mui#38286)
  • Loading branch information
@mnajdova
mnajdova authored Aug 14, 2023
1 parent 7770430 commit 2bfecd8
Show file tree
Hide file tree
Showing 13 changed files with 1,000 additions and 115 deletions.
154 changes: 135 additions & 19 deletions docs/data/base/components/table-pagination/TableCustomized/tailwind/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useTheme } from '@mui/system';
import { TablePagination } from '@mui/base/TablePagination';

Expand Down Expand Up @@ -86,8 +88,7 @@ export default function TableCustomized() {
</tbody>
<tfoot>
<tr className="border border-solid border-slate-200 dark:border-slate-800 text-left p-1.5">
<TablePagination
className="CustomTablePagination p-1.5"
<CustomTablePagination
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
colSpan={3}
count={rows.length}
Expand All @@ -96,27 +97,10 @@ export default function TableCustomized() {
slotProps={{
select: {
'aria-label': 'rows per page',
className:
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl bg-transparent hover:bg-slate-20 hover:dark:bg-slate-800 focus:outline-0 focus:shadow-outline-purple-xs',
},
actions: {
showFirstButton: true,
showLastButton: true,
className:
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl text-center [&>button]:my-0 [&>button]:mx-2 [&>button]:border-transparent [&>button]:rounded-sm [&>button]:bg-transparent [&>button:hover]:bg-slate-50 [&>button:hover]:dark:bg-slate-800 [&>button:focus]:outline-0 [&>button:focus]:shadow-outline-purple-xs',
},
spacer: {
className: 'hidden',
},
toolbar: {
className:
'flex flex-col items-start gap-2.5 md:flex-row md:items-center',
},
selectLabel: {
className: 'm-0',
},
displayedRows: {
className: 'm-0 md:ml-auto',
},
}}
onPageChange={handleChangePage}
Expand All @@ -129,6 +113,138 @@ export default function TableCustomized() {
);
}

const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);

const CustomTablePagination = React.forwardRef((props, ref) => {
return (
<TablePagination
ref={ref}
{...props}
className={clsx('CustomTablePagination p-1.5', props.className)}
slotProps={{
...props.slotProps,
select: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.select,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx(
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl bg-transparent hover:bg-slate-20 hover:dark:bg-slate-800 focus:outline-0 focus:shadow-outline-purple-xs',
resolvedSlotProps?.className,
),
};
},
actions: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.actions,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx(
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl text-center [&>button]:my-0 [&>button]:mx-2 [&>button]:border-transparent [&>button]:rounded-sm [&>button]:bg-transparent [&>button:hover]:bg-slate-50 [&>button:hover]:dark:bg-slate-800 [&>button:focus]:outline-0 [&>button:focus]:shadow-outline-purple-xs',
resolvedSlotProps?.className,
),
};
},
spacer: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.spacer,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx('hidden', resolvedSlotProps?.className),
};
},
toolbar: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.toolbar,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx(
'flex flex-col items-start gap-2.5 md:flex-row md:items-center',
resolvedSlotProps?.className,
),
};
},
selectLabel: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.selectLabel,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx('m-0', resolvedSlotProps?.className),
};
},
displayedRows: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.displayedRows,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx('m-0 md:ml-auto', resolvedSlotProps?.className),
};
},
}}
/>
);
});

CustomTablePagination.propTypes = {
className: PropTypes.string,
/**
* The props used for each slot inside the TablePagination.
* @default {}
*/
slotProps: PropTypes.shape({
actions: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({
count: PropTypes.number,
direction: PropTypes.oneOf(['ltr', 'rtl']),
getItemAriaLabel: PropTypes.func,
onPageChange: PropTypes.func,
page: PropTypes.number,
rowsPerPage: PropTypes.number,
showFirstButton: PropTypes.bool,
showLastButton: PropTypes.bool,
slotProps: PropTypes.shape({
backButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
firstButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
lastButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
nextButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}),
slots: PropTypes.shape({
backButton: PropTypes.elementType,
backPageIcon: PropTypes.elementType,
firstButton: PropTypes.elementType,
firstPageIcon: PropTypes.elementType,
lastButton: PropTypes.elementType,
lastPageIcon: PropTypes.elementType,
nextButton: PropTypes.elementType,
nextPageIcon: PropTypes.elementType,
root: PropTypes.elementType,
}),
}),
]),
displayedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
menuItem: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
select: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
selectLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
spacer: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
toolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}),
};

function createData(name, calories, fat) {
return { name, calories, fat };
}
Expand Down
111 changes: 91 additions & 20 deletions docs/data/base/components/table-pagination/TableCustomized/tailwind/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import clsx from 'clsx';
import { useTheme } from '@mui/system';
import { TablePagination } from '@mui/base/TablePagination';
import { TablePagination, TablePaginationProps } from '@mui/base/TablePagination';

function useIsDarkMode() {
const theme = useTheme();
Expand Down Expand Up @@ -91,8 +92,7 @@ export default function TableCustomized() {
</tbody>
<tfoot>
<tr className="border border-solid border-slate-200 dark:border-slate-800 text-left p-1.5">
<TablePagination
className="CustomTablePagination p-1.5"
<CustomTablePagination
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
colSpan={3}
count={rows.length}
Expand All @@ -101,27 +101,10 @@ export default function TableCustomized() {
slotProps={{
select: {
'aria-label': 'rows per page',
className:
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl bg-transparent hover:bg-slate-20 hover:dark:bg-slate-800 focus:outline-0 focus:shadow-outline-purple-xs',
},
actions: {
showFirstButton: true,
showLastButton: true,
className:
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl text-center [&>button]:my-0 [&>button]:mx-2 [&>button]:border-transparent [&>button]:rounded-sm [&>button]:bg-transparent [&>button:hover]:bg-slate-50 [&>button:hover]:dark:bg-slate-800 [&>button:focus]:outline-0 [&>button:focus]:shadow-outline-purple-xs',
},
spacer: {
className: 'hidden',
},
toolbar: {
className:
'flex flex-col items-start gap-2.5 md:flex-row md:items-center',
},
selectLabel: {
className: 'm-0',
},
displayedRows: {
className: 'm-0 md:ml-auto',
},
}}
onPageChange={handleChangePage}
Expand All @@ -134,6 +117,94 @@ export default function TableCustomized() {
);
}

const resolveSlotProps = (fn: any, args: any) =>
typeof fn === 'function' ? fn(args) : fn;

const CustomTablePagination = React.forwardRef<
HTMLTableCellElement,
TablePaginationProps
>((props, ref) => {
return (
<TablePagination
ref={ref}
{...props}
className={clsx('CustomTablePagination p-1.5', props.className)}
slotProps={{
...props.slotProps,
select: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.select,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx(
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl bg-transparent hover:bg-slate-20 hover:dark:bg-slate-800 focus:outline-0 focus:shadow-outline-purple-xs',
resolvedSlotProps?.className,
),
};
},
actions: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.actions,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx(
'p-0.5 border border-solid border-slate-200 dark:border-slate-800 rounded-3xl text-center [&>button]:my-0 [&>button]:mx-2 [&>button]:border-transparent [&>button]:rounded-sm [&>button]:bg-transparent [&>button:hover]:bg-slate-50 [&>button:hover]:dark:bg-slate-800 [&>button:focus]:outline-0 [&>button:focus]:shadow-outline-purple-xs',
resolvedSlotProps?.className,
),
};
},
spacer: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.spacer,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx('hidden', resolvedSlotProps?.className),
};
},
toolbar: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.toolbar,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx(
'flex flex-col items-start gap-2.5 md:flex-row md:items-center',
resolvedSlotProps?.className,
),
};
},
selectLabel: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.selectLabel,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx('m-0', resolvedSlotProps?.className),
};
},
displayedRows: (ownerState) => {
const resolvedSlotProps = resolveSlotProps(
props.slotProps?.displayedRows,
ownerState,
);
return {
...resolvedSlotProps,
className: clsx('m-0 md:ml-auto', resolvedSlotProps?.className),
};
},
}}
/>
);
});

function createData(name: string, calories: number, fat: number) {
return { name, calories, fat };
}
Expand Down
Loading

0 comments on commit 2bfecd8

Please sign in to comment.