chore: use shorter columns prop name

Author: ghiscoding

with-i18n-translate/src/examples/slickgrid/Example01.tsx

@@ -15,15 +15,15 @@ const Example1: React.FC = () => {
   const [dataset2] = useState<any[]>(mockData(NB_ITEMS));
 
   /* Define grid Options and Columns */
-  const columnDefinitions1: Column[] = [
+  const columns1: Column[] = [
     { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 },
     { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 },
     { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 },
     { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
     { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
     { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 },
   ];
-  const columnDefinitions2: Column[] = [...columnDefinitions1];
+  const columns2: Column[] = [...columns1];
 
   const gridOptions1: GridOption = {
     darkMode: defaultBrowserDarkMode,
@@ -81,7 +81,7 @@ const Example1: React.FC = () => {
 
   function resetGrid1() {
     // const cols = reactGrid1.slickGrid?.getColumns() || [];
-    const cols = columnDefinitions1.slice();
+    const cols = columns1.slice();
     cols.forEach((c) => (c.hidden = false));
     reactGrid1?.slickGrid?.setColumns(cols);
     reactGrid1?.slickGrid?.autosizeColumns();
@@ -144,7 +144,7 @@ const Example1: React.FC = () => {
       <div className="grid-container1">
         <SlickgridReact
           gridId="grid1-1"
-          columns={columnDefinitions1}
+          columns={columns1}
           options={gridOptions1!}
           dataset={dataset1}
           onReactGridCreated={($event) => reactGrid1Ready($event.detail)}
@@ -156,7 +156,7 @@ const Example1: React.FC = () => {
       <h3>
         Grid 2 <small>(with local Pagination)</small>
       </h3>
-      <SlickgridReact gridId="grid1-2" columns={columnDefinitions2} options={gridOptions2!} dataset={dataset2} />
+      <SlickgridReact gridId="grid1-2" columns={columns2} options={gridOptions2!} dataset={dataset2} />
     </div>
   );
 };

with-i18n-translate/src/examples/slickgrid/Example02.tsx

@@ -38,7 +38,7 @@ const Example2: React.FC = () => {
   const [hideSubTitle, setHideSubTitle] = useState(false);
 
   // the columns field property is type-safe, try to add a different string not representing one of DataItems properties
-  const columnDefinitions: Column[] = [
+  const columns: Column[] = [
     { id: 'title', name: 'Title', field: 'title', sortable: true, width: 70 },
     {
       id: 'phone',
@@ -280,7 +280,7 @@ const Example2: React.FC = () => {
 
       <SlickgridReact
         gridId="grid2"
-        columns={columnDefinitions}
+        columns={columns}
         options={gridOptions}
         dataset={dataset}
         onReactGridCreated={($event) => reactGridReady($event.detail)}

with-i18n-translate/src/examples/slickgrid/Example03.tsx

@@ -67,7 +67,7 @@ const Example3: React.FC = () => {
   const [reactGrid, setReactGrid] = useState<SlickgridReactInstance>();
   const [hideSubTitle, setHideSubTitle] = useState(false);
 
-  const [columnDefinitions, setColumnDefinitions] = useState<Column[]>([
+  const [columns, setColumns] = useState<Column[]>([
     {
       id: 'edit',
       field: 'id',
@@ -448,7 +448,7 @@ const Example3: React.FC = () => {
     // wrap into a timer to simulate a backend async call
     setTimeout(() => {
       // at any time, we can poke the 'collection' property and modify it
-      const requisiteColumnDef = columnDefinitions?.find((column: Column) => column.id === 'prerequisites');
+      const requisiteColumnDef = columns?.find((column: Column) => column.id === 'prerequisites');
       if (requisiteColumnDef) {
         const collectionEditor = requisiteColumnDef.editor!.collection;
         const collectionFilter = requisiteColumnDef.filter!.collection;
@@ -485,7 +485,7 @@ const Example3: React.FC = () => {
 
   /** Delete last inserted row */
   function deleteItem() {
-    const requisiteColumnDef = columnDefinitions?.find((column: Column) => column.id === 'prerequisites');
+    const requisiteColumnDef = columns?.find((column: Column) => column.id === 'prerequisites');
     if (requisiteColumnDef) {
       const collectionEditor = requisiteColumnDef.editor!.collection;
       const collectionFilter = requisiteColumnDef.filter!.collection;
@@ -592,26 +592,26 @@ const Example3: React.FC = () => {
 
     // you can dynamically add your column to your column definitions
     // and then use the spread operator [...cols] OR slice to force React to review the changes
-    setColumnDefinitions([...columnDefinitions!, newCol]);
+    setColumns([...columns!, newCol]);
 
     // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
     // you MUST use 'getAllColumnDefinitions()' from the GridService, using this will be ALL columns including the 1st column that is created internally
     // for example if you use the Checkbox Selector (row selection), you MUST use the code below
     /*
     const allColumns = reactGrid.gridService.getAllColumnDefinitions();
     allColumns.push(newCol);
-    columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for React to do dirty checking
+    columns = [...allColumns]; // (or use slice) reassign to column definitions for React to do dirty checking
     */
   }
 
   function dynamicallyRemoveLastColumn() {
-    columnDefinitions.pop();
-    setColumnDefinitions(columnDefinitions.slice());
+    columns.pop();
+    setColumns(columns.slice());
 
     /*
     // remove your column the full set of columns
     allOriginalColumns.pop();
-    columnDefinitions = allOriginalColumns.slice();
+    columns = allOriginalColumns.slice();
     */
   }
 
@@ -785,7 +785,7 @@ const Example3: React.FC = () => {
       <div className="col-sm-12">
         <SlickgridReact
           gridId="grid3"
-          columns={columnDefinitions}
+          columns={columns}
           options={gridOptions}
           dataset={dataset}
           onReactGridCreated={(e) => {

with-i18n-translate/src/examples/slickgrid/Example04.tsx

@@ -28,7 +28,7 @@ const Example4: React.FC = () => {
     saveCurrentGridState();
   }, []);
 
-  const columnDefinitions: Column[] = [
+  const columns: Column[] = [
     {
       id: 'title',
       name: 'Title',
@@ -438,7 +438,7 @@ const Example4: React.FC = () => {
 
       <SlickgridReact
         gridId="grid4"
-        columns={columnDefinitions}
+        columns={columns}
         options={gridOptions}
         dataset={dataset}
         onGridStateChanged={($event) => gridStateChanged($event.detail)}

with-i18n-translate/src/examples/slickgrid/Example05.tsx

@@ -24,7 +24,7 @@ interface Status {
 
 const Example5: React.FC = () => {
   const [gridOptions, setGridOptions] = useState<GridOption | undefined>(undefined);
-  const [columnDefinitions, setColumnDefinitions] = useState<Column[]>([]);
+  const [columns, setColumns] = useState<Column[]>([]);
   const [dataset, setDataset] = useState<any[]>([]);
   const [paginationOptions, setPaginationOptions] = useState<Pagination | undefined>(undefined);
   const [errorStatus, setErrorStatus] = useState<string>('');
@@ -122,7 +122,7 @@ const Example5: React.FC = () => {
     };
   }
 
-  function getColumnDefinitions(): Column[] {
+  function getColumns(): Column[] {
     return [
       {
         id: 'name',
@@ -163,11 +163,11 @@ const Example5: React.FC = () => {
   }
 
   function defineGrid() {
-    const columnDefinitions = getColumnDefinitions();
+    const columns = getColumns();
     const gridOptions = getGridDefinition();
 
     gridOptionsRef.current = gridOptions;
-    setColumnDefinitions(columnDefinitions);
+    setColumns(columns);
     setGridOptions(gridOptions);
   }
 
@@ -713,7 +713,7 @@ const Example5: React.FC = () => {
 
       <SlickgridReact
         gridId="grid5"
-        columns={columnDefinitions}
+        columns={columns}
         options={gridOptions}
         dataset={dataset}
         paginationOptions={paginationOptions}

with-i18n-translate/src/examples/slickgrid/Example06.tsx

@@ -33,7 +33,7 @@ const FAKE_SERVER_DELAY = 250;
 const Example6: React.FC = () => {
   const defaultLang = 'en';
   const [gridOptions, setGridOptions] = useState<GridOption | undefined>(undefined);
-  const [columnDefinitions, setColumnDefinitions] = useState<Column[]>([]);
+  const [columns, setColumns] = useState<Column[]>([]);
   const [dataset] = useState<any[]>([]);
   const [metrics, setMetrics] = useState<Metrics | undefined>(undefined);
   const [processing, setProcessing] = useState<boolean>(false);
@@ -176,10 +176,10 @@ const Example6: React.FC = () => {
   }
 
   function defineGrid() {
-    const columnDefinitions = getColumnsDefinition();
+    const columns = getColumnsDefinition();
     const gridOptions = getGridOptions();
 
-    setColumnDefinitions(columnDefinitions);
+    setColumns(columns);
     setGridOptions(gridOptions);
   }
 
@@ -620,7 +620,7 @@ const Example6: React.FC = () => {
 
       <SlickgridReact
         gridId="grid6"
-        columns={columnDefinitions}
+        columns={columns}
         options={gridOptions}
         dataset={dataset}
         onReactGridCreated={($event) => reactGridReady($event.detail)}

with-i18n-translate/src/examples/slickgrid/Example07.tsx

@@ -5,8 +5,8 @@ import './example07.scss';
 const Example7: React.FC = () => {
   const [gridOptions1, setGridOptions1] = useState<GridOption | undefined>(undefined);
   const [gridOptions2, setGridOptions2] = useState<GridOption | undefined>(undefined);
-  const [columnDefinitions1, setColumnDefinitions1] = useState<Column[]>([]);
-  const [columnDefinitions2, setColumnDefinitions2] = useState<Column[]>([]);
+  const [columns1, setColumns1] = useState<Column[]>([]);
+  const [columns2, setColumns2] = useState<Column[]>([]);
   const [dataset1, setDataset1] = useState<any[]>([]);
   const [dataset2, setDataset2] = useState<any[]>([]);
   const [hideSubTitle, setHideSubTitle] = useState(false);
@@ -65,13 +65,13 @@ const Example7: React.FC = () => {
       },
     });
 
-    const columnDefinitions1 = createColumnDefinitions(1);
-    const columnDefinitions2 = createColumnDefinitions(2);
-    setColumnDefinitions1(columnDefinitions1);
-    setColumnDefinitions2(columnDefinitions2);
+    const columns1 = createColumns(1);
+    const columns2 = createColumns(2);
+    setColumns1(columns1);
+    setColumns2(columns2);
 
-    setDataset1(loadData(200, columnDefinitions1));
-    setDataset2(loadData(200, columnDefinitions2));
+    setDataset1(loadData(200, columns1));
+    setDataset2(loadData(200, columns2));
   }
 
   function handleOnCommand(_e: SlickEventData, args: any, gridNo: 1 | 2) {
@@ -105,12 +105,12 @@ const Example7: React.FC = () => {
     }
   }
 
-  function createColumnDefinitions(gridNo: number) {
+  function createColumns(gridNo: number) {
     // Set up some test columns.
-    const columnDefinitions: any[] = [];
+    const columns: any[] = [];
 
     for (let i = 0; i < 10; i++) {
-      columnDefinitions.push({
+      columns.push({
         id: i,
         name: 'Column ' + String.fromCharCode('A'.charCodeAt(0) + i),
         field: i + '',
@@ -151,8 +151,8 @@ const Example7: React.FC = () => {
     }
 
     // Set multiple buttons on the first column to demonstrate overflow.
-    columnDefinitions[0].name = 'Resize me!';
-    columnDefinitions[0].header = {
+    columns[0].name = 'Resize me!';
+    columns[0].header = {
       buttons: [
         {
           cssClass: 'mdi mdi-message-text',
@@ -183,12 +183,12 @@ const Example7: React.FC = () => {
 
     // when floating to left, you might want to inverse the icon orders
     if (gridNo === 2) {
-      columnDefinitions[0].header?.buttons?.reverse();
+      columns[0].header?.buttons?.reverse();
     }
 
     // Set a button on the second column to demonstrate hover.
-    columnDefinitions[1].name = 'Hover me!';
-    columnDefinitions[1].header = {
+    columns[1].name = 'Hover me!';
+    columns[1].header = {
       buttons: [
         {
           cssClass: 'mdi mdi-help-circle',
@@ -201,17 +201,17 @@ const Example7: React.FC = () => {
       ],
     };
 
-    return columnDefinitions;
+    return columns;
   }
 
-  function loadData(count: number, columnDefinitions: Column[]) {
+  function loadData(count: number, columns: Column[]) {
     // mock a dataset
     const mockDataset: any[] = [];
 
     for (let i = 0; i < count; i++) {
       const d: any = (mockDataset[i] = {});
       d['id'] = i;
-      for (let j = 0; j < columnDefinitions.length; j++) {
+      for (let j = 0; j < columns.length; j++) {
         d[j] = Math.round(Math.random() * 10) - 5;
       }
     }
@@ -270,7 +270,7 @@ const Example7: React.FC = () => {
       <h5>Grid 1</h5>
       <SlickgridReact
         gridId="grid7-1"
-        columns={columnDefinitions1}
+        columns={columns1}
         options={gridOptions1}
         dataset={dataset1}
         onReactGridCreated={($event) => reactGrid1Ready($event.detail)}
@@ -283,7 +283,7 @@ const Example7: React.FC = () => {
       </h5>
       <SlickgridReact
         gridId="grid7-2"
-        columns={columnDefinitions2}
+        columns={columns2}
         options={gridOptions2}
         dataset={dataset2}
         onReactGridCreated={($event) => reactGrid2Ready($event.detail)}

with-i18n-translate/src/examples/slickgrid/Example08.tsx

@@ -6,7 +6,7 @@ import './example08.scss'; // provide custom CSS/SASS styling
 
 const Example8: React.FC = () => {
   const defaultLang = 'en';
-  const [columnDefinitions, setColumnDefinitions] = useState<Column[]>([]);
+  const [columns, setColumns] = useState<Column[]>([]);
   const [dataset, setDataset] = useState<any[]>([]);
   const [gridOptions, setGridOptions] = useState<GridOption | undefined>(undefined);
   const [selectedLanguage, setSelectedLanguage] = useState<string>(defaultLang);
@@ -19,8 +19,8 @@ const Example8: React.FC = () => {
     getData();
   }, []);
 
-  function getColumnDefinitions(): Column[] {
-    const columnDefinitions: Column[] = [
+  function getColumns(): Column[] {
+    const columns: Column[] = [
       { id: 'title', name: 'Title', field: 'title', nameKey: 'TITLE' },
       { id: 'duration', name: 'Duration', field: 'duration', nameKey: 'DURATION', sortable: true },
       { id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', sortable: true },
@@ -29,7 +29,7 @@ const Example8: React.FC = () => {
       { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', formatter: Formatters.checkmarkMaterial },
     ];
 
-    columnDefinitions.forEach((columnDef) => {
+    columns.forEach((columnDef) => {
       columnDef.header = {
         menu: {
           commandItems: [
@@ -104,7 +104,7 @@ const Example8: React.FC = () => {
         },
       };
     });
-    return columnDefinitions;
+    return columns;
   }
 
   function getGridOptions(): GridOption {
@@ -141,9 +141,9 @@ const Example8: React.FC = () => {
 
   function defineGrid() {
     const gridOptions = getGridOptions();
-    const columnDefinitions = getColumnDefinitions();
+    const columns = getColumns();
 
-    setColumnDefinitions(columnDefinitions);
+    setColumns(columns);
     setGridOptions(gridOptions);
   }
 
@@ -230,7 +230,7 @@ const Example8: React.FC = () => {
       <span style={{ fontStyle: 'italic' }} data-test="selected-locale">
         {selectedLanguage + '.json'}
       </span>
-      <SlickgridReact gridId="grid8" columns={columnDefinitions} options={gridOptions} dataset={dataset} />
+      <SlickgridReact gridId="grid8" columns={columns} options={gridOptions} dataset={dataset} />
     </div>
   );
 };