chore(grid-demos): update demo data (#2352)

packages/dx-react-grid-demos/src/demo-data/generator.js

@@ -85,9 +85,9 @@ const generateDate = ({
 const generatePhone = () => Math.random().toString().slice(2, 12).replace(/(\d{3})(\d{3})(\d{4})$/, '($1) $2-$3');
 
 export const defaultColumnValues = {
-  sex: ['Male', 'Female'],
+  gender: ['Male', 'Female'],
   name: [
-    'sex',
+    'gender',
     {
       Male: maleFirstNames,
       Female: femaleFirstNames,
@@ -130,16 +130,16 @@ export const globalSalesValues = {
 };
 
 export const employeeValues = {
-  sex: ['Male', 'Female'],
+  gender: ['Male', 'Female'],
   prefix: [
-    'sex',
+    'gender',
     {
       Male: ['Mr.', 'Dr.'],
       Female: ['Mrs.', 'Ms.', 'Dr.'],
     },
   ],
   firstName: [
-    'sex',
+    'gender',
     {
       Male: maleFirstNames,
       Female: femaleFirstNames,

packages/dx-react-grid-demos/src/demo-sources/grid-column-chooser/controlled.jsxt

@@ -13,15 +13,15 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [tableColumnExtensions] = useState([
-    { columnName: 'sex', width: 100 },
+    { columnName: 'gender', width: 100 },
   ]);
-  const [hiddenColumnNames, setHiddenColumnNames] = useState(['sex', 'car']);
+  const [hiddenColumnNames, setHiddenColumnNames] = useState(['gender', 'car']);
 
   return (
     <<%&wrapperTag%><%&wrapperAttributes%>>

packages/dx-react-grid-demos/src/demo-sources/grid-column-chooser/disable-toggling-column-visibility.jsxt

@@ -13,12 +13,12 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
-  const [defaultHiddenColumnNames] = useState(['sex', 'car']);
+  const [defaultHiddenColumnNames] = useState(['gender', 'car']);
   const [tableColumnVisibilityColumnExtensions] = useState([
     { columnName: 'city', togglingEnabled: false },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-column-chooser/uncontrolled.jsxt

@@ -13,12 +13,12 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
-  const [defaultHiddenColumnNames] = useState(['sex', 'car']);
+  const [defaultHiddenColumnNames] = useState(['gender', 'car']);
 
   return (
     <<%&wrapperTag%><%&wrapperAttributes%>>

packages/dx-react-grid-demos/src/demo-sources/grid-column-reordering/controlled.jsxt

@@ -12,15 +12,15 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [tableColumnExtensions] = useState([
-    { columnName: 'sex', width: 100 },
+    { columnName: 'gender', width: 100 },
   ]);
-  const [columnOrder, setColumnOrder] = useState(['city', 'sex', 'car', 'name']);
+  const [columnOrder, setColumnOrder] = useState(['city', 'gender', 'car', 'name']);
 
   return (
     <<%&wrapperTag%><%&wrapperAttributes%>>

packages/dx-react-grid-demos/src/demo-sources/grid-column-reordering/uncontrolled.jsxt

@@ -12,13 +12,13 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [tableColumnExtensions] = useState([
-    { columnName: 'sex', width: 100 },
+    { columnName: 'gender', width: 100 },
   ]);
 
   return (
@@ -32,7 +32,7 @@ export default () => {
           columnExtensions={tableColumnExtensions}
         />
         <TableColumnReordering
-          defaultOrder={['city', 'sex', 'car', 'name']}
+          defaultOrder={['city', 'gender', 'car', 'name']}
         />
         <TableHeaderRow />
       </Grid>

packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/bootstrap3/resizing-mode.jsx

@@ -69,14 +69,14 @@ const ResizingPanel = props => (
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [defaultColumnWidths] = useState([
     { columnName: 'name', width: 180 },
-    { columnName: 'sex', width: 180 },
+    { columnName: 'gender', width: 180 },
     { columnName: 'city', width: 180 },
     { columnName: 'car', width: 240 },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/bootstrap4/resizing-mode.jsx

@@ -70,14 +70,14 @@ const ResizingPanel = props => (
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [defaultColumnWidths] = useState([
     { columnName: 'name', width: 180 },
-    { columnName: 'sex', width: 180 },
+    { columnName: 'gender', width: 180 },
     { columnName: 'city', width: 180 },
     { columnName: 'car', width: 240 },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/controlled.jsxt

@@ -11,14 +11,14 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [columnWidths, setColumnWidths] = useState([
     { columnName: 'name', width: 180 },
-    { columnName: 'sex', width: 180 },
+    { columnName: 'gender', width: 180 },
     { columnName: 'city', width: 180 },
     { columnName: 'car', width: 240 },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/material-ui/resizing-mode.jsx

@@ -109,14 +109,14 @@ const ResizingPanel = props => (
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [defaultColumnWidths] = useState([
     { columnName: 'name', width: 180 },
-    { columnName: 'sex', width: 180 },
+    { columnName: 'gender', width: 180 },
     { columnName: 'city', width: 180 },
     { columnName: 'car', width: 240 },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-column-resizing/uncontrolled.jsxt

@@ -11,14 +11,14 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [rows] = useState(generateRows({ length: 6 }));
   const [defaultColumnWidths] = useState([
     { columnName: 'name', width: 180 },
-    { columnName: 'sex', width: 180 },
+    { columnName: 'gender', width: 180 },
     { columnName: 'city', width: 180 },
     { columnName: 'car', width: 240 },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-detail-row/detail-row-controlled.jsxt

@@ -24,7 +24,7 @@ const RowDetail = ({ row }) => (
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-detail-row/simple-detail-row.jsxt

@@ -24,7 +24,7 @@ const RowDetail = ({ row }) => (
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-editing/disable-column-editing.jsxt

@@ -18,7 +18,7 @@ const getRowId = row => row.id;
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-editing/edit-row-controlled.jsxt

@@ -19,7 +19,7 @@ export default () => {
   const [columns] = useState([
     { name: 'id', title: 'ID' },
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-editing/edit-row.jsxt

@@ -18,7 +18,7 @@ const getRowId = row => row.id;
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-filtering/controlled-mode.jsxt

@@ -15,7 +15,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-filtering/custom-filtering-algorithm.jsxt

@@ -18,7 +18,7 @@ const cityPredicate = (value, filter) => toLowerCase(value).startsWith(toLowerCa
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-filtering/disable-column-filtering.jsxt

@@ -15,7 +15,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-filtering/filter-row.jsxt

@@ -15,7 +15,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-grouping/controlled-mode.jsxt

@@ -18,7 +18,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-grouping/custom-advanced.jsxt

@@ -38,7 +38,7 @@ const nameGroupCriteria = (value) => {
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-grouping/custom-grouping-static.jsxt

@@ -21,24 +21,24 @@ const getChildGroups = groups => groups
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);
   const [data] = useState([{
     key: 'Male',
     items: generateRows({
-      columnValues: { ...defaultColumnValues, sex: ['Male'] },
+      columnValues: { ...defaultColumnValues, gender: ['Male'] },
       length: 5,
     }),
   }, {
     key: 'Female',
     items: generateRows({
-      columnValues: { ...defaultColumnValues, sex: ['Female'] },
+      columnValues: { ...defaultColumnValues, gender: ['Female'] },
       length: 5,
     }),
   }]);
-  const [grouping] = useState([{ columnName: 'sex' }]);
+  const [grouping] = useState([{ columnName: 'gender' }]);
 
   return (
     <<%&wrapperTag%><%&wrapperAttributes%>>

packages/dx-react-grid-demos/src/demo-sources/grid-grouping/custom.jsxt

@@ -33,7 +33,7 @@ const cityGroupCriteria = value => ({ key: value.substr(0, 1) });
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-grouping/disable-column-grouping.jsxt

@@ -18,7 +18,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-grouping/grouping-with-ui.jsxt

@@ -18,7 +18,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-grouping/static.jsxt

@@ -15,7 +15,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);

packages/dx-react-grid-demos/src/demo-sources/grid-immutability/seamless-immutable.jsxt

@@ -20,7 +20,7 @@ import { generateRows } from '../../../demo-data/generator';
 const rows = Immutable(generateRows({ length: 8 }));
 const columns = Immutable([
   { name: 'name', title: 'Name' },
-  { name: 'sex', title: 'Sex' },
+  { name: 'gender', title: 'Gender' },
   { name: 'city', title: 'City' },
   { name: 'car', title: 'Car' },
 ]);

packages/dx-react-grid-demos/src/demo-sources/grid-paging/controlled-mode.jsxt

@@ -15,7 +15,7 @@ import { generateRows } from '../../../demo-data/generator';
 export default () => {
   const [columns] = useState([
     { name: 'name', title: 'Name' },
-    { name: 'sex', title: 'Sex' },
+    { name: 'gender', title: 'Gender' },
     { name: 'city', title: 'City' },
     { name: 'car', title: 'Car' },
   ]);