> ## Documentation Index
> Fetch the complete documentation index at: https://zero-true.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# DataFrame

<Card title="Example Usage" icon="code">
  ```python theme={null}
  import zero_true as zt
  import pandas as pd

  # Sample data
  data = {
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [24, 30, 22],
    'City': ['New York', 'Los Angeles', 'Chicago']
  }

  # Create a pandas DataFrame
  df = pd.DataFrame(data)

  # Create the headers for the DataFrame component
  headers = [
    zt.Header(key='Name', title='Name', align='start'),
    zt.Header(key='Age', title='Age', align='start'),
    zt.Header(key='City', title='City', align='start')
  ]

  # Create the DataFrame component from the pandas DataFrame
  sample_dataframe = zt.DataFrame.from_dataframe(df, id='sample_dataframe')

  # Update headers (if needed)
  sample_dataframe.headers = headers

  # Assuming you have a mechanism to render or use this DataFrame within a layout
  layout = zt.Layout(components=[sample_dataframe])
  ```
</Card>

<Card title="Example Output" icon="computer">
  <iframe src="https://published.zero-true.com/srrey/exampledataframe/" width="100%" height="300" />
</Card>

## Overview

`pydantic model zero_true.DataFrame`

The DataFrame component utilizes the familiar structure of a data table, making it easy to integrate and display data from various sources, including directly from a pandas DataFrame.

<Note>This component is essential for applications that require data analysis and presentation, providing functionalities like sorting, filtering, and viewing detailed information in a user-friendly manner. </Note>

## JSON Schema

<Accordion title="Field Defenitions">
  ```json theme={null}
  {
     "title": "DataFrame",
     "description": "DataFrame component for displaying tabluar data",
     "type": "object",
     "properties": {
        "id": {
           "description": "Unique id for a component",
           "title": "Id",
           "type": "string"
        },
        "variable_name": {
           "default": "",
           "description": "Optional variable name associated with a component",
           "title": "Variable Name",
           "type": "string"
        },
        "component": {
           "default": "v-data-table",
           "description": "Vue component name.",
           "title": "Component",
           "type": "string"
        },
        "headers": {
           "default": [],
           "description": "List of column headers for the DataFrame",
           "items": {
              "$ref": "#/$defs/Header"
           },
           "title": "Headers",
           "type": "array"
        },
        "items": {
           "default": [],
           "description": "List of items to be displayed in the DataFrame",
           "items": {
              "type": "object"
           },
           "title": "Items",
           "type": "array"
        }
     },
     "$defs": {
        "Header": {
           "description": "Header class for the columns of a DataFrame component",
           "properties": {
              "title": {
                 "default": "",
                 "description": "Title of the column",
                 "title": "Title",
                 "type": "string"
              },
              "align": {
                 "default": "start",
                 "description": "Alignment of values in the column",
                 "title": "Align",
                 "type": "string"
              },
              "key": {
                 "default": "name",
                 "description": "Key of the column, must match the key in the items list",
                 "title": "Key",
                 "type": "string"
              }
           },
           "title": "Header",
           "type": "object"
        }
     },
     "required": [
        "id"
     ]
  }

  ```
</Accordion>

<Info>Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.</Info>

<ResponseField name="zero_true.DataFrame" type="Zero True Component">
  <Expandable title="properties">
    <AccordionGroup>
      <Accordion title="field component">
        **field component:** str = 'v-data-table';
        Vue component name.
      </Accordion>

      <Accordion title="field headers">
        **field headers:** List\[Header] = \[];
        List of column headers for the DataFrame.
      </Accordion>

      <Accordion title="field items">
        **field items:** List\[Dict\[str, Any]] = \[];
        List of items to be displayed in the DataFrame.
      </Accordion>

      <Accordion title="classmethod from_dataframe">
        **classmethod from\_dataframe:** (df: DataFrame, id: str);
        Create a DataFrame component from a pandas DataFrame.
      </Accordion>

      <Accordion title="field align">
        **field align:** str = 'start';
        Alignment of values in the column.
      </Accordion>

      <Accordion title="field key">
        **field key:** str = 'name';
        Key of the column, must match the key in the items list.
      </Accordion>

      <Accordion title="field title">
        **field title:** str = '';
        Title of the column.
      </Accordion>
    </AccordionGroup>
  </Expandable>
</ResponseField>