Build customisable tables with data from your database or static files

The DataTb component displays data ordered in a two-dimensional table. It can be populated with data from a Directud API endpoint, a static CSV or JSON files hosted locally or in the WWW. Under the hood DataTb uses the React Data Table Component and supports out of the box all configurations and settings described on the official documentation.

In this page:

• Example of a Directus instance as data source
• Example with a CSV file as data source
• API documentation

Example of a Directus instance as data source

<DataTb
    source={{
      directus: {
        table: "scms_ksa",
        queryString: "limit=-1&offset=0",
      }
    }}
    striped={true}
    columns={[
      {
        name: "Label",
        sortable: true,
        cell: item => (
              <a href={`../record/?tb=scms_ksa&id=${item.id}`}>
                {item["Item_Label"]} 
              </a>
            ),
      },
      {
        name: "Site name",
        selector: row => row["Site_Name"],
        sortable: true,
      },
      {
        name: "Thumbnail",
        cell: item => (
              <img src={item["Thumbnail"]} />
            ),
        sortable: true,
      },
      {
        name: "Date",
        selector: row => `${row["Early"]} — ${row["Late"]}`,
        sortable: true,
      },
      {
        name: "Collection summary",
        selector: row => row["Collection_Summary"],
        sortable: true,
      },
    ]}
  />

Example with a CSV file as data source

<DataTb
    source={{
    path2data: {
      path: "/data/ksa.csv"
    }
  }}
  columns={[
    {
      name: "Item_Label",
      sortable: true,
      selector: row => row["Item_Label"],
    },
    {
      name: "Site_Name",
      selector: row => row["Site_Name"],
      sortable: true,
    },
    {
      name: "Thumbnail",
      cell: item => <img src={item["Thumbnail"]} />,
      sortable: true,
    },
    {
      name: "Date",
      selector: row => `${row["Early"]} — ${row["Late"]}`,
      sortable: true,
    },
    {
      name: "Collection_Summary",
      selector: row => row["Collection_Summary"],
      sortable: true,
    },
  ]}
/>

API documentation

source

An object containing information to source data. This should include the necessary properties for querying the data source. Data can be sourced from a static file (typically a CSV file stored locally or available on the web), a Directus API, or a custom API.

• Object
• Required
• Default: null

If a static file is used, the source object should implement the path2data property, structued as a key: value object with a single path key poniting to the static file path, eg.:

{
  path2data: {
    path: "path/to/data.csv"
  }
}

If a Directus API is used, the source object should implement the directus property, structured as a key: value object with the following keys:

• endpoint: Optional Directus endpoint. It can be omitted if env variable GATSBY_DIRECTUS_ENDPOINT is set.
• table: Required Directus table name.
• queryString: Optional Directus filters and other, provided as querystring compatible to Directus API.
• token: Optional Directus access token. It can be omitted if env variable GATSBY_DIRECTUS_TOKEN is set.
• id: Optional Id of a specific record to retrieve. Required for record data displaying.
• geoField: Field that contains geographical data to display on map.

Example:

{
  directus: {
    endPoint: "https://example.com/directus",
    table: "my_table",
    queryString: "filter[my_field][_eq]=something&limit=-1",
    token: "my-random-string-access-token",
    id: "id-oth-the-record-to-display",
    geoField:"coordinates",
  }
}

Finally, if a custom API is used, the source object should implement the customApi property, structured as an object with the following keys:

• formatUrl: Required function to format the URL. It accepts a string as a parameter and should return a string rappresenting the URL to get data from
• parseResponse: Required function to parse the response. it accepts the response object and should return the data to display on the map.

Example:

{
  customApi: {
    formatUrl: (searchString) => {
      return `https://api.example.com/search?q=${searchString}`;
    },    
    parseResponse: (response) => {
      return response.data;
    }
  }
}

columns

Object containing information on the columns of the table. The full documentation is available in the official documentation|

• Object
• required
• Default: null

...props

All parameters described in the official React Data Table Component documentation can be used with this component.