🗃️ Q3 UI Datatables

resolvers

The resolvers prop is particularly powerful, as it automates common data formatting tasks. It accepts a function that should return a data schema for the Cell component to interpret. The resolver calls on each row, so be sure to account for nullish values!

export const resolvers = ({
  title,
  date,
  age,
  status,
}) => ({
  photo: 'https:google.ca', // Can take override value,
  name: title, // Can take variable value,
  status: {
    base: status, // Can take base value
    toDot: true, // With a formatter
  },
  data: {
    base: status,
    toDate: true,
  },
  age: {
    renderProps: () => {
      // dynamic props to forward into the formatter
      // useful for adjusting color, language, etc.
      return {};
    },
  },
});

| Formatter | Description | | ------------ | -------------------------------------------------------------------------------------------- | | toString | Casts to basic string | | toTruthy | Casts to yes/no | | toDate | Casts to localized date string | | toPrice | Casts to common price display, rounded to 2nd decimal | | toChip | Renders inside MUI Badge | | toDot | Renders with a coloured dot indicator | | toAction | Renders an icon button that receives all other props in the data object (i.e. click handler) | | helperText | Adds a popover element with supporting text |