Skip to content

Commit

Permalink
feat: add row id and provide telling warning for common errors
Browse files Browse the repository at this point in the history
  • Loading branch information
Domino987 committed Jul 15, 2021
1 parent a5c6d61 commit 39d5d35
Show file tree
Hide file tree
Showing 8 changed files with 254 additions and 14,285 deletions.
2 changes: 1 addition & 1 deletion __tests__/demo/demo-components/EditableRowDateColumnIssue/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function EditableTable() {
}
]);

const [data, setData] = useState([{ date: new Date() }]);
const [data, setData] = useState([{ date: new Date(), id: 0 }]);

return (
<MaterialTable
Expand Down
4 changes: 2 additions & 2 deletions __tests__/demo/demo-components/RemoteData/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export function I1941() {
.then((response) => response.json())
.then((result) => {
resolve({
data: result.data,
data: result.data.map((d, i) => ({ ...d, id: i })),
page: result.page - 1,
totalCount: result.total
});
Expand Down Expand Up @@ -215,7 +215,7 @@ export function I122() {
.then((response) => response.json())
.then((result) => {
resolve({
data: result.data,
data: result.data.map((d, i) => ({ ...d, id: i })),
page: result.page - 1,
totalCount: result.total
});
Expand Down
186 changes: 109 additions & 77 deletions __tests__/demo/demo-components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@ import MaterialTable, { MTableBodyRow, MTableEditRow } from '../../../src'; // r
export { default as EditableRowDateColumnIssue } from './EditableRowDateColumnIssue';

const global_data = [
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 }
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63, id: 0 },
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34,
id: 1
}
];

const global_data_CustomExport = [
Expand All @@ -15,14 +21,16 @@ const global_data_CustomExport = [
surname: 'Baran',
birthYear: 1987,
birthCity: 63,
teams: ['Team A', 'Team B']
teams: ['Team A', 'Team B'],
id: 0
},
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34,
teams: ['Team C', 'Team D', 'Team E']
teams: ['Team C', 'Team D', 'Team E'],
id: 1
}
];

Expand All @@ -39,8 +47,8 @@ const global_cols = [

export function BulkEdit() {
const [data, setData] = useState([
{ name: 'joe', id: 1, age: 0, x: 'y' },
{ name: 'nancy', id: 2, age: 1, x: 'b' }
{ name: 'joe', id: 1, age: 0, x: 'y', id: 0 },
{ name: 'nancy', id: 2, age: 1, x: 'b', id: 1 }
]);

const [columns] = useState([
Expand Down Expand Up @@ -80,8 +88,8 @@ export function BulkEdit() {

export function BulkEditWithDetailPanel() {
const [data, setData] = useState([
{ name: 'joe', id: 1, age: 0, x: 'y' },
{ name: 'nancy', id: 2, age: 1, x: 'b' }
{ name: 'joe', id: 1, age: 0, x: 'y', id: 0 },
{ name: 'nancy', id: 2, age: 1, x: 'b', id: 1 }
]);

const [columns] = useState([
Expand Down Expand Up @@ -265,8 +273,25 @@ const global_cols = [
* Basic demo that shows a single detail panel, in this case a youtube vid
*/
export function Basic() {
const [t, setT] = React.useState([]);
const data = [
{ name: 'Foo', surname: 'Bar', id: 0 },
{ name: 'John', surname: 'Smith', id: 1 }
];
return (
<MaterialTable title="Basic" columns={global_cols} data={global_data} />
<MaterialTable
title="Basic"
columns={global_cols.map((col) => ({
...col,
render: (rowData) => <button>{rowData.tableData.id}</button>
}))}
data={data}
onSelectionChange={(rowData) => {
console.debug(rowData);
setT(rowData);
}}
options={{ selection: true }}
/>
);
}

Expand Down Expand Up @@ -324,7 +349,7 @@ export function OneDetailPanel() {
fontSize: 100,
textAlign: 'center',
color: 'white',
backgroundColor: '#43A047',
backgroundColor: '#43A047'
}}
>
{rowData.name}
Expand All @@ -338,71 +363,71 @@ export function OneDetailPanel() {
}

export function MultipleDetailPanels() {
return (
<MaterialTable
title="Multiple Detail Panels Preview"
columns={global_cols}
data={global_data}
detailPanel={[
{
tooltip: 'Show Name',
render: rowData => {
return (
<div
style={{
fontSize: 100,
textAlign: 'center',
color: 'white',
backgroundColor: '#43A047',
}}
>
{rowData.name}
</div>
)
},
},
{
icon: 'account_circle',
tooltip: 'Show Surname',
render: rowData => {
return (
<div
style={{
fontSize: 101,
textAlign: 'center',
color: 'white',
backgroundColor: '#E53935',
}}
>
{rowData.surname}
</div>
)
},
},
{
icon: 'favorite_border',
openIcon: 'favorite',
tooltip: 'Show Both',
render: rowData => {
return (
<div
style={{
fontSize: 102,
textAlign: 'center',
color: 'white',
backgroundColor: '#FDD835',
}}
>
{rowData.name} {rowData.surname}
</div>
)
},
},
]}
onRowClick={(event, rowData, togglePanel) => togglePanel()}
/>
);
}
return (
<MaterialTable
title="Multiple Detail Panels Preview"
columns={global_cols}
data={global_data}
detailPanel={[
{
tooltip: 'Show Name',
render: (rowData) => {
return (
<div
style={{
fontSize: 100,
textAlign: 'center',
color: 'white',
backgroundColor: '#43A047'
}}
>
{rowData.name}
</div>
);
}
},
{
icon: 'account_circle',
tooltip: 'Show Surname',
render: (rowData) => {
return (
<div
style={{
fontSize: 101,
textAlign: 'center',
color: 'white',
backgroundColor: '#E53935'
}}
>
{rowData.surname}
</div>
);
}
},
{
icon: 'favorite_border',
openIcon: 'favorite',
tooltip: 'Show Both',
render: (rowData) => {
return (
<div
style={{
fontSize: 102,
textAlign: 'center',
color: 'white',
backgroundColor: '#FDD835'
}}
>
{rowData.name} {rowData.surname}
</div>
);
}
}
]}
onRowClick={(event, rowData, togglePanel) => togglePanel()}
/>
);
}

// A little bit of everything
export function FrankensteinDemo() {
Expand Down Expand Up @@ -566,12 +591,19 @@ export function DefaultOrderIssue(props) {
}
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{
name: 'Mehmet',
surname: 'Baran',
birthYear: 1987,
birthCity: 63,
id: 0
},
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34
birthCity: 34,
id: 1
}
]}
options={{
Expand Down
75 changes: 0 additions & 75 deletions __tests__/demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,83 +43,8 @@ module.hot.accept();

render(
<div>
<h1>EditableRowDateColumnIssue</h1>
<EditableRowDateColumnIssue />

<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>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>
</div>,
document.querySelector('#app')
);
Loading

0 comments on commit 39d5d35

Please sign in to comment.