LocalDataGrid

Reference

• The LocalDataGrid component is display data grid built using the Handsontable library.
• It supports advanced features like custom cell renderers, filtering, sorting, and dynamic data handling, making it suitable for displaying and managing tabular data.

Key Features

• Customizable Columns: Dynamically configure columns with custom renderers and attributes.
• Advanced Filtering: Built-in filtering with callbacks for filtered row counts.
• File Handling: Supports file preview and download using FileDownloader.
• Dynamic Layout: Adjusts column widths and layout based on props like shrinkToFit.
• State Management: Handles grid state (e.g., loading, filtering) with a reducer.

Props

1. fields

   • Type: Array
   • Description: Defines the columns of the grid, including attributes like name, type, isVisible, and custom renderers.

2. items

   • Type: Array
   • Description: The data to display in the grid.

3. onReload

   • Type: function
   • Description: Callback triggered when the grid is reloaded.

4. leftHeader

   • Type: function
   • Description: Renders custom content for the left header section.

5. columnFilterEnabled

   • Type: boolean
   • Default: true
   • Description: Enables or disables column filtering.

6. columnSortingEnabled

   • Type: boolean
   • Default: true
   • Description: Enables or disables column sorting.

7. shrinkToFit

   • Type: boolean
   • Default: true
   • Description: Adjusts column widths to fit the grid.

8. filteredRecordsCallback

   • Type: function
   • Description: Callback triggered after filtering, providing the count of filtered rows.
   • If want to do some action when filter is applied use this function.

Sample format for fields

[
    {
        fieldType: "Attribute",
        attributeType: "Text",
        label: name, // Used to show haeder labels
        isVisible: true, 
        width: 200, 
        // If shrinkToFit is false then width given to column will get applied
        attributeName: name,
        customRenderer: getCustomRenderer(name), 
        // Here pass custom renderer if null then 
        it will render deafult renderer based on attribute type
    }
]

Sample format for items

Minimum required values are :
[
    attributes : [
        {
        "name": "Name",
        "type": "Text",
        "canUpdate": true,
        "textValue": "TestStud"
        },
        {
        "name": "StudBooleanAttribute",
        "type": "Boolean",
        "canUpdate": true,
        "booleanValue": false
        }
    ]
]

Usage Example

function GatOnboarding(pageContext) {
  let skip = 0;
  let take = 10000;
  const getGatsPromise = React.useCallback(() => {
    return {
      endpoint: 'instances',
      config: {
        method: 'GET',
        params: {
          instanceTypeName: 'Gat',
          'attributes[0]': 'Name',
          'attributes[1]': 'TrackingId',
          'attributes[2]': 'GatToVillageRef',
          'attributes[3]': 'GatAdmin',
          'attributes[4]': 'GatFarmerCount',
          'attributes[5]': 'Created',
          'attributes[6]': 'Modified',
          'attributes[7]': 'Modifier',
          'attributes[8]': 'CropTypeOnGat',
          getAllowedOperations: true,
          getAllowedActions: true,
          getOnlyActionableInstances: false,
          skip: skip,
          take: take,
          sortBy: 'Created',
          IsSortByDescending: true,
        },
      },
    };
  }, [skip, take]);
  const getVillagesPromise = React.useCallback(() => {
    return {
      endpoint: 'instances',
      config: {
        method: 'GET',
        params: {
          instanceTypeName: 'Village',
          'attributes[0]': 'VillageToTalukaRef',
          'attributes[1]': 'VillageToDistrictRef',
          'attributes[2]': 'Name',
          skip: 0,
          take: 9999,
        },
      },
    };
  }, []);
  const { protrakUtils, protrakComponents } =
    React.useContext(customWidgetContext);
  const { useProtrakApi, usePaginatedGet, getDate } = protrakUtils;
  const {
    state: responseForGats,
    nextPage,
    paginationState,
    hasMoreItems,
  } = usePaginatedGet(
    {
      requestConfig: getGatsPromise,
      skip,
      take,
    },
    {},
    take
  );
  React.useEffect(() => {
    if (!responseForGats.isLoading && responseForGats.data && hasMoreItems()) {
      nextPage();
    }
  }, [responseForGats, hasMoreItems, nextPage]);
  const {
    Box,
    Button,
    ButtonEnums,
    ExportCSVButton,
    ShowDrillDownData,
    Container,
    Spinner,
    ErrorModal,
  } = protrakComponents;

  if (responseForGats.isLoading || hasMoreItems()) {
    return (
      <Container>
        <Spinner />
      </Container>
    );
  }
  if (!responseForGats.isLoading && responseForGats.data && !hasMoreItems()) {
    if (responseForGats.isError) {
      return <ErrorModal state={responseForGats} />;
    }

    if (responseForGats.data.items && responseForGats.data.items.length > 0) {
      return <TabularData gats={responseForGats.data.items} />;
    }
  }

  function TabularData({ gats }) {
    const { protrakUtils, protrakComponents } =
      React.useContext(customWidgetContext);
    const { useProtrakApi } = protrakUtils;

    const { state: villages, run } = useProtrakApi({
      requestConfig: getVillagesPromise,
    });

    const { Container, Spinner, ErrorModal } = protrakComponents;
    if (villages.isLoading || !villages.data) {
      return (
        <Container>
          <Spinner />
        </Container>
      );
    }

    if (!villages.isLoading) {
      if (villages.isError) {
        return <ErrorModal state={villages} />;
      }
      return <Data gats={gats} villages={villages} />;
    }
  }

  function Data({ gats, villages }) {
    const { protrakComponents, protrakUtils } =
      React.useContext(customWidgetContext);
    const {} = protrakUtils;
    const { Box, LocalDataGrid, Label, ExportCSVButton } = protrakComponents;
    const [isDataChanged, setIsDataChanged] = React.useState(false);
    const columns = [
      'Name',
      'TrackingId',
      'CropTypeOnGat',
      'GatToVillageRef',
      'VillageToTalukaRef',
      'VillageToDistrictRef',
      'AdminName',
      'AdminMobile',
      'GatFarmerCount',
      'Created',
      'Modified',
      'Modifier',
    ];
    function GetColumnValue(data, column, villages) {
      const { protrakUtils } = React.useContext(customWidgetContext);
      const { formatDateTime } = protrakUtils;

      let villageData;
      const villageAttr =
        data &&
        data.attributes.find((attribute) => {
          return attribute.name === 'GatToVillageRef';
        });
      if (
        villageAttr &&
        villageAttr.referenceValues &&
        villageAttr.referenceValues[0]
      ) {
        const villageId = villageAttr.referenceValues[0].id;

        villageData = villages.data.items.find((village) => {
          return village.id && village.id == villageId;
        });
      }

      let adminData;
      const adminAttr =
        data &&
        data.attributes.find((attribute) => {
          return attribute.name === 'GatAdmin';
        });
      if (adminAttr && adminAttr.userValues && adminAttr.userValues[0]) {
        adminData = adminAttr.userValues[0];
      }

      if (column == 'Name') {
        return {
          name: 'Name',
          type: 'Text',
          canUpdate: true,
          textValue: data.name ? data.name : '-',
        };
      }
      if (column == 'TrackingId') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'TrackingId';
          });
        if (typeof attribute == 'undefined') {
          return {
            name: 'TrackingId',
            type: 'Text',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }

      if (column === 'CropTypeOnGat') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'CropTypeOnGat';
          });
        if (typeof attribute == 'undefined') {
          return {
            name: 'CropTypeOnGat',
            type: 'Reference',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }

      if (column === 'GatToVillageRef') {
        return {
          name: 'GatToVillageRef',
          type: 'Text',
          canUpdate: true,
          textValue: villageData && villageData.name ? villageData.name : '-',
        };
      }
      if (column === 'VillageToTalukaRef') {
        const attribute =
          villageData &&
          villageData.attributes.find((attribute) => {
            return attribute.name === 'VillageToTalukaRef';
          });
        if (typeof attribute == 'undefined') {
          return {
            name: 'VillageToTalukaRef',
            type: 'Reference',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }

      if (column === 'VillageToDistrictRef') {
        const attribute =
          villageData &&
          villageData.attributes.find((attribute) => {
            return attribute.name === 'VillageToDistrictRef';
          });
        if (typeof attribute == 'undefined') {
          return {
            name: 'VillageToDistrictRef',
            type: 'Reference',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }
      if (column === 'AdminName') {
        return {
          name: 'AdminName',
          type: 'Text',
          canUpdate: true,
          textValue: adminData && adminData.userName ? adminData.userName : '-',
        };
      }
      if (column === 'AdminMobile') {
        return {
          name: 'AdminMobile',
          type: 'Text',
          canUpdate: true,
          textValue: adminData && adminData.phone ? adminData.phone : '-',
        };
      }
      if (column === 'GatFarmerCount') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'GatFarmerCount';
          });

        if (typeof attribute == 'undefined') {
          return {
            name: 'GatFarmerCount',
            type: 'Numeric',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }
      if (column === 'Created') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'Created';
          });

        if (typeof attribute == 'undefined') {
          return {
            name: 'Created',
            type: 'DateTime',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }
      if (column === 'Modified') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'Modified';
          });

        if (typeof attribute == 'undefined') {
          return {
            name: 'Modified',
            type: 'DateTime',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }
      if (column === 'Modifier') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'Modifier';
          });

        if (typeof attribute == 'undefined') {
          return {
            name: 'Modifier',
            type: 'User',
            canUpdate: true,
          };
        } else {
          return attribute;
        }
      }
    }

    function GetRowValue(data, column, villages) {
      const { protrakUtils } = React.useContext(customWidgetContext);
      const { formatDateTime } = protrakUtils;

      let villageData;
      const villageAttr =
        data &&
        data.attributes.find((attribute) => {
          return attribute.name === 'GatToVillageRef';
        });
      if (
        villageAttr &&
        villageAttr.referenceValues &&
        villageAttr.referenceValues[0]
      ) {
        const villageId = villageAttr.referenceValues[0].id;

        villageData = villages.data.items.find((village) => {
          return village.id && village.id == villageId;
        });
      }

      let adminData;
      const adminAttr =
        data &&
        data.attributes.find((attribute) => {
          return attribute.name === 'GatAdmin';
        });
      if (adminAttr && adminAttr.userValues && adminAttr.userValues[0]) {
        adminData = adminAttr.userValues[0];
      }

      if (column == 'Name') {
        return data.name;
      }
      if (column == 'TrackingId') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'TrackingId';
          });
        return attribute && attribute.textValue ? attribute.textValue : '-';
      }
      if (column === 'CropTypeOnGat') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'CropTypeOnGat';
          });
        return attribute &&
          attribute.referenceValues &&
          attribute.referenceValues[0]
          ? attribute.referenceValues[0].name
          : '-';
      }

      if (column === 'GatToVillageRef') {
        return villageData && villageData.name ? villageData.name : '-';
      }
      if (column === 'VillageToTalukaRef') {
        const attribute =
          villageData &&
          villageData.attributes.find((attribute) => {
            return attribute.name === 'VillageToTalukaRef';
          });
        return attribute &&
          attribute.referenceValues &&
          attribute.referenceValues[0]
          ? attribute.referenceValues[0].name
          : '-';
      }
      if (column === 'VillageToDistrictRef') {
        const attribute =
          villageData &&
          villageData.attributes.find((attribute) => {
            return attribute.name === 'VillageToDistrictRef';
          });
        return attribute &&
          attribute.referenceValues &&
          attribute.referenceValues[0]
          ? attribute.referenceValues[0].name
          : '-';
      }
      if (column === 'AdminName') {
        return adminData && adminData.userName ? adminData.userName : '-';
      }
      if (column === 'AdminMobile') {
        return adminData && adminData.phone ? adminData.phone : '-';
      }
      if (column === 'GatFarmerCount') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'GatFarmerCount';
          });
        return attribute && attribute.numericValue
          ? attribute.numericValue
          : '-';
      }
      if (column === 'Created') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'Created';
          });
        return attribute && attribute.dateValue ? attribute.dateValue : '-';
      }
      if (column === 'Modified') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'Modified';
          });
        return attribute && attribute.dateValue ? attribute.dateValue : '-';
      }
      if (column === 'Modifier') {
        const attribute =
          data &&
          data.attributes.find((attribute) => {
            return attribute.name === 'Modifier';
          });
        return attribute && attribute.userValues && attribute.userValues[0]
          ? attribute.userValues[0].userName
          : '-';
      }
    }

    const renderName = ({ value, attribute, column, rowIndex }) => {
      const appUrl = document.location.origin.includes('localhost')
        ? '/Protrak'
        : '';
      return (
        <a
          href={`${appUrl}/#view_${exportData[rowIndex]['Id']}`}
          target="_blank"
          style={{ color: 'var(--secondary)' }}
        >
          {value}
        </a>
      );
    };
    const renderGatNo = ({ value, attribute, column, rowIndex }) => {
      const appUrl = document.location.origin.includes('localhost')
        ? '/Protrak'
        : '';
      return (
        <a
          href={`${appUrl}/#view_${exportData[rowIndex]['Id']}`}
          target="_blank"
          style={{ color: 'var(--secondary)' }}
        >
          {value}
        </a>
      );
    };
    const getCustomRenderer = (columnName) => {
      if (columnName === 'Name') {
        return renderName;
      } else if (columnName === 'TrackingId') {
        return renderGatNo;
      }
      return null;
    };

    const columnHeaders = [
      {
        fieldType: 'Attribute',
        attributeType: 'Text',
        label: 'Name',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'Name',
        readOnly: true,
        customRenderer: getCustomRenderer('Name'),
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Text',
        label: 'Gat No',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'TrackingId',
        readOnly: true,
        customRenderer: getCustomRenderer('TrackingId'),
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Reference',
        label: 'Crop',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'CropTypeOnGat',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Text',
        label: 'Village',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'GatToVillageRef',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Reference',
        label: 'Taluka',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'VillageToTalukaRef',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Reference',
        label: 'District',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'VillageToDistrictRef',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Text',
        label: 'Admin Name',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'AdminName',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Text',
        label: 'Admin Mobile',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'AdminMobile',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'Numeric',
        label: 'No. Of Farmers',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'GatFarmerCount',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'DateTime',
        label: 'Created Date',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'Created',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'DateTime',
        label: 'Modified Date',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'Modified',
        readOnly: true,
      },
      {
        fieldType: 'Attribute',
        attributeType: 'User',
        label: 'Modified By',
        isEditable: false,
        isVisible: true,
        width: 200,
        attributeName: 'Modifier',
        readOnly: true,
      },
    ];

    const headers = [
      { key: 'Name', attributeType: 'Text' },
      { key: 'TrackingId', attributeType: 'Text' },
      { key: 'CropTypeOnGat', attributeType: 'Reference' },
      { key: 'GatToVillageRef', attributeType: 'Text' },
      { key: 'VillageToTalukaRef', attributeType: 'Reference' },
      { key: 'VillageToDistrictRef', attributeType: 'Reference' },
      { key: 'AdminName', attributeType: 'Text' },
      { key: 'AdminMobile', attributeType: 'Text' },
      { key: 'GatFarmerCount', attributeType: 'Numeric' },
      { key: 'Created', attributeType: 'DateTime' },
      { key: 'Modified', attributeType: 'DateTime' },
      { key: 'Modifier', attributeType: 'User' },
    ];

    let rowsData = [];
    gats.forEach((gat) => {
      let attributes = [];
      columns.forEach((column) => {
        attributes.push(GetColumnValue(gat, column, villages));
      });
      rowsData.push({ attributes });
    });

    let exportData = [];
    gats.forEach((gat) => {
      var rowData = { Id: gat.id };
      columns.forEach((column) => {
        rowData[column] = GetRowValue(gat, column, villages);
      });
      exportData.push(rowData);
    });

    const tableLeftHeader = () => {
      return (
        <Box
          alignSelf="right"
          justifyContent="space-between"
          alignItems="center"
        >
          <Box alignSelf="baseline">
            <ExportCSVButton
              data={exportData}
              headers={headers}
              filename="GatOnboarding"
            />
          </Box>
        </Box>
      );
    };

    return (
        <LocalDataGrid
          leftHeader={tableLeftHeader}
          fields={columnHeaders}
          items={rowsData}
          shrinkToFit={true}
          columnSorting={true}
          colWidths={false}
          showPagination={false}
          totalCount={rowsData.length}
          isDataChanged={isDataChanged}
          pageSize={rowsData.length}
          onDataChange={() => {
            setIsDataChanged(false);
          }}
        />
    );
  }
  return null;
}

UI