Skip to content

Commit

Permalink
fix for tableheader dark mode (#795)
Browse files Browse the repository at this point in the history 
Co-authored-by: Domino987 <[email protected]>
  • Loading branch information
@Domino987
Domino987 and Domino987 authored Oct 4, 2023
1 parent de5a8e1 commit 0d12110
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 104 deletions.
227 changes: 125 additions & 102 deletions __tests__/demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,116 +53,139 @@ import {
} from './demo-components';
import { createRoot } from 'react-dom/client';
import { I1353, I1941, I122 } from './demo-components/RemoteData';
import { Switch, FormControlLabel, CssBaseline } from '@mui/material';

module.hot.accept();

const container = document.querySelector('#app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
<StrictMode>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={createTheme()}>
<h1>DetailPanelRemounting</h1>
<DetailPanelRemounting />
{/* <h1>Switcher</h1>
<DataSwitcher />

<h1>SelectionOnRowClick</h1>
<SelectionOnRowClick />
function Demo() {
const [darkMode, setMode] = React.useState(false);
return (
<StrictMode>
<StyledEngineProvider injectFirst>
<ThemeProvider
theme={createTheme({
palette: { mode: darkMode ? 'dark' : 'light' }
})}
>
<CssBaseline />
<FormControlLabel
control={
<Switch
checked={darkMode}
onChange={(e) => {
setMode(e.target.checked);
}}
/>
}
label="Dark Mode"
/>

<h1>EventTargetErrorOnRowClick</h1>
<EventTargetErrorOnRowClick
onSelectionChange={(d) => console.log('onSelectionChange', d)}
/>
<h1>DetailPanelRemounting</h1>
<DetailPanelRemounting />
{/* <h1>Switcher</h1>
<DataSwitcher />
<h1>DetailPanelIssuesProgrammaticallyHidingWhenOpen</h1>
<DetailPanelIssuesProgrammaticallyHidingWhenOpen />
<h1>SelectionOnRowClick</h1>
<SelectionOnRowClick />
<h1>Basic</h1>
<Basic />
<h1>EventTargetErrorOnRowClick</h1>
<EventTargetErrorOnRowClick
onSelectionChange={(d) => console.log('onSelectionChange', d)}
/>
<h1>Basic Ref</h1>
<BasicRef />
<h1>DetailPanelIssuesProgrammaticallyHidingWhenOpen</h1>
<DetailPanelIssuesProgrammaticallyHidingWhenOpen />
{/*
<h1>Export Data</h1>
<ExportData />
*/}
{/*
<h1>Custom Export </h1>
<CustomExport />
*/}
<h1>Bulk Edit</h1>
<BulkEdit />
<h1>Default Order Issue</h1>
<DefaultOrderIssue />
<h1>Bulk Edit With Detail Panel</h1>
<BulkEditWithDetailPanel />
<h1>Hiding Columns</h1>
<HidingColumns />
<h1>TestingNewActionHandlersProp</h1>
<TestingNewActionHandlersProp />
<h1>Editable Rows</h1>
<EditableRow />
<h1>One Detail Panel</h1>
<OneDetailPanel />
<h1>Multiple Detail Panels</h1>
<MultipleDetailPanels />
<h1>Editable</h1>
<EditableCells />
<h1>Frankenstein</h1>
<FrankensteinDemo />
<h1>Resizable Columns</h1>
<Resizable />
<h1>Persistent Groupings</h1>
<PersistentGroupings persistentGroupingsId="persistence-id" />
<h1>Persistent Groupings Same ID</h1>
<PersistentGroupings persistentGroupingsId="persistence-id" />
<h1>Persistent Groupings unshared</h1>
<PersistentGroupings persistentGroupingsId="some-other-id" />
<h1>Tree data</h1>
<TreeData />
<h1>Table with Summary Row</h1>
<TableWithSummary />
<h1>
Table with custom numbers of pages around current page in stepped
navigation
</h1>
<TableWithNumberOfPagesAround />
<h1>Fixed Column with Row Edits</h1>
<FixedColumnWithEdit />
<h1>Localization with Custom Components</h1>
<LocalizationWithCustomComponents />
<h1>Remote Data Related</h1>
<ol>
<li>
<h3>
mbrn{' '}
<a href="https://github.com/mbrn/material-table/issues/1353">
#1353
</a>
</h3>
<I1353 />
</li>
<li>
<h3>
mbrn{' '}
<a href="https://github.com/mbrn/material-table/issues/1941">
#1941
</a>
</h3>
<I1941 />
</li>
<li>
<h3>
<a href="https://github.com/material-table-core/core/issues/122">
#122
</a>
</h3>
<I122 />
</li>
</ol>
</ThemeProvider>
</StyledEngineProvider>
</StrictMode>
);
<h1>Basic</h1>
<Basic />
<h1>Basic Ref</h1>
<BasicRef />
{/*
<h1>Export Data</h1>
<ExportData />
*/}
{/*
<h1>Custom Export </h1>
<CustomExport />
*/}
<h1>Bulk Edit</h1>
<BulkEdit />
<h1>Default Order Issue</h1>
<DefaultOrderIssue />
<h1>Bulk Edit With Detail Panel</h1>
<BulkEditWithDetailPanel />
<h1>Hiding Columns</h1>
<HidingColumns />
<h1>TestingNewActionHandlersProp</h1>
<TestingNewActionHandlersProp />
<h1>Editable Rows</h1>
<EditableRow />
<h1>One Detail Panel</h1>
<OneDetailPanel />
<h1>Multiple Detail Panels</h1>
<MultipleDetailPanels />
<h1>Editable</h1>
<EditableCells />
<h1>Frankenstein</h1>
<FrankensteinDemo />
<h1>Resizable Columns</h1>
<Resizable />
<h1>Persistent Groupings</h1>
<PersistentGroupings persistentGroupingsId="persistence-id" />
<h1>Persistent Groupings Same ID</h1>
<PersistentGroupings persistentGroupingsId="persistence-id" />
<h1>Persistent Groupings unshared</h1>
<PersistentGroupings persistentGroupingsId="some-other-id" />
<h1>Tree data</h1>
<TreeData />
<h1>Table with Summary Row</h1>
<TableWithSummary />
<h1>
Table with custom numbers of pages around current page in stepped
navigation
</h1>
<TableWithNumberOfPagesAround />
<h1>Fixed Column with Row Edits</h1>
<FixedColumnWithEdit />
<h1>Localization with Custom Components</h1>
<LocalizationWithCustomComponents />
<h1>Remote Data Related</h1>
<ol>
<li>
<h3>
mbrn{' '}
<a href="https://github.com/mbrn/material-table/issues/1353">
#1353
</a>
</h3>
<I1353 />
</li>
<li>
<h3>
mbrn{' '}
<a href="https://github.com/mbrn/material-table/issues/1941">
#1941
</a>
</h3>
<I1941 />
</li>
<li>
<h3>
<a href="https://github.com/material-table-core/core/issues/122">
#122
</a>
</h3>
<I122 />
</li>
</ol>
</ThemeProvider>
</StyledEngineProvider>
</StrictMode>
);
}
root.render(<Demo />);
3 changes: 1 addition & 2 deletions src/components/MTableHeader/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,8 +566,7 @@ export const styles = {
header: {
// display: 'inline-block',
// position: 'sticky',
top: 0,
backgroundColor: 'background.paper' // Change according to theme,
top: 0
},
headerWrap: (alignRight) => ({
display: 'flex',
Expand Down

0 comments on commit 0d12110

Please sign in to comment.