> ## Documentation Index
> Fetch the complete documentation index at: https://dev.writer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DataFrame

A component to display Pandas DataFrames.

<img src="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/dataframe.png?fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=c444e32b85b12ede5bb8e41a99eca8f5" width="1828" height="322" data-path="framework/public/components/dataframe.png" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Data</td>
      <td>Text</td>
      <td>Must be a state reference to a Pandas dataframe or PyArrow table. Alternatively, a URL for an Arrow IPC file.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Show index</td>
      <td>Boolean</td>
      <td>Shows the dataframe's index. If an Arrow table is used, shows the zero-based integer index.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable search</td>
      <td>Boolean</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable adding a record</td>
      <td>Boolean</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable updating a record</td>
      <td>Boolean</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable download</td>
      <td>Boolean</td>
      <td>Allows the user to download the data as CSV.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Actions</td>
      <td>Key-Value</td>
      <td>Define rows actions</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable markdown</td>
      <td>Boolean</td>
      <td>If active, the output will be sanitized; unsafe elements will be removed.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Display row count</td>
      <td>Number</td>
      <td>Specifies how many rows to show simultaneously.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Wrap text</td>
      <td>Boolean</td>
      <td>Not wrapping text allows for an uniform grid, but may be inconvenient if your data contains longer text fields.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Primary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Secondary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Accent</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Separator</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Background</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Font style</td>
      <td>Text</td>
      <td>-</td>

      <td>
        <ol>
          <li>normal</li>

          <li>monospace</li>
        </ol>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>

## Events

<AccordionGroup>
  <Accordion title="wf-dataframe-add" icon="code">
    Capture adding a row.

    ```python theme={null}
    # Subscribe this event handler to the `wf-dataframe-add` event
    #
    # more on : https://dev.writer.com/framework/dataframe
    def on_record_add(state, payload):
    payload['record']['sales'] = 0 # default value inside the dataframe
    state['mydf'].record_add(payload) # should contain an EditableDataFrame instance
    ```
  </Accordion>

  <Accordion title="wf-dataframe-update" icon="code">
    Capture a cell change.

    ```python theme={null}
    # Subscribe this event handler to the `wf-dataframe-update` event
    #
    # more on : https://dev.writer.com/framework/dataframe
    def on_record_change(state, payload):
    state['mydf'].record_update(payload) # should contain an EditableDataFrame instance
    ```
  </Accordion>

  <Accordion title="wf-dataframe-action" icon="code">
    Remove or open a row.

    ```python theme={null}
    # Subscribe this event handler to the `wf-dataframe-action` event
    #
    # more on : https://dev.writer.com/framework/dataframe
    def on_record_action(state, payload):
    # state['mydf'] should contains an EditableDataFrame instance
    record_index = payload['record_index']
    if payload['action'] == 'remove':
    	state['mydf'].record_remove(payload) # should contain an EditableDataFrame instance
    if payload['action'] == 'open':
    	state['record'] = state['mydf'].record(record_index) # dict representation of record
    ```
  </Accordion>
</AccordionGroup>

<events />